封装一个函数获取和修改属性

最新推荐文章于 2022-08-01 12:32:59 发布

奶茶丶

最新推荐文章于 2022-08-01 12:32:59 发布

阅读量1.3k

点赞数 7

分类专栏：前端 javascript html 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_52764447/article/details/121317907

版权

前端同时被 3 个专栏收录

59 篇文章 4 订阅

订阅专栏

html

51 篇文章 2 订阅

订阅专栏

javascript

35 篇文章 3 订阅

订阅专栏

最近在做一个前后端交互的项目，根据不同的需求获取页面不同元素的属性，根据属性修改不同的样式，虽然我们有获取属性和修改属性的方法，但是每次都要写一遍，学前端的同学应该深有体会吧，当页面元素过多时，挨个的去获取非常的麻烦，别急，众多方法中总有最简单的那一个。

用一个函数将其功能封装起来，

    // obj是哪个对象 attr哪个属性
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr]
        }
        else {
            return getComputedStyle(obj, false)[attr]
        }
    }
    //获取属性或者设置属性
    function getElementStyle(obj, attr, value) {
        //获取css的数值
        if (arguments.length == 2) {
            return getStyle(obj, attr)
        }
        //设置css的数值
        if (arguments.length === 3) {
            obj.style[attr] = value + 'px'
        }
    }

测试：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery.min.js"></script>
    <script src="./class.js"></script>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="div1"></div>
</body>

</html>

$(function () {
    // obj是哪个对象 attr哪个属性
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr]
        }
        else {
            return getComputedStyle(obj, false)[attr]
        }
    }
    //获取属性或者设置属性
    function getElementStyle(obj, attr, value) {
        //获取css的数值
        if (arguments.length == 2) {
            return getStyle(obj, attr)
        }
        //设置css的数值
        if (arguments.length === 3) {
            obj.style[attr] = value + 'px'
        }
    }
     //测试
    var div = document.querySelector('#div1');
    var result = getElementStyle(div, "width")
    //当调用函数时，只传递两个参数时，就是获取div的width值
    console.log(result);
    //当调用函数时，只传递三个参数时，就是修改当前属性值
    getElementStyle(div, 'width', 200)
})

奶茶丶

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
13
评论
封装一个函数获取和修改属性

最近在做一个前后端交互的项目，根据不同的需求获取页面不同元素的属性，根据属性修改不同的样式，虽然我们有获取属性和修改属性的方法，但是每次都要写一遍，学前端的同学应该深有体会吧，当页面元素过多时，挨个的去获取非常的麻烦，别急，众多方法中总有最简单的那一个。用一个函数将其功能封装起来， // obj是哪个对象 attr哪个属性 function getStyle(obj, attr) { if (obj.currentStyle) { ...
复制链接

扫一扫