js访问CSS属性

原创：https://blog.csdn.net/KaiSarH/article/details/103737856

1.点语法

box.style.width

box.style.height

box.style.top

得到带有单位的属性值，比如200px；但是，点语法有一个很致命的问题，跟在style后面的属性不能由外部传入。

比如：

var h = 'height';

box.style.h = 300 + 'px';

无法设置box的高度

2.下标语法：这种语法的好处是可以动态传递参数作为属性

比如：

var h = 'height';

box.style[h] = 300 + 'px';

进行设置box的高度

JS获取CSS的样式

问题

在开发中，我们想要获得CSS样式，通常采用：box.style.top、box.style.backgroundColor等，但是这种方式只能获得行内样式，无法获得业内样式或者外部样式表中的定义的属性，如何解决？

解决

在IE和Opera浏览器中，使用：

obj.currentStyle

在W3C标准浏览器中，使用：

window.getComputeStyle("元素","伪类")

注意：两个选项是必须的，没有伪类用null代替

兼容写法

getStyleAttr: function (obj, attr) {

   if (obj.currentStyle) { // IE 和 opera

        return obj.currentStyle[attr];

    } else {

        return window.getComputedStyle(obj, null)[attr];

    }

},