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

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

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

    // 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：

js

$(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)
})