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

Posted 2021-12-11 奶茶丶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了封装一个函数获取和修改属性相关的知识，希望对你有一定的参考价值。

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

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

    // 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)
})

以上是关于封装一个函数获取和修改属性的主要内容，如果未能解决你的问题，请参考以下文章

python之路之前没搞明白4面向对象（封装）