JS访问和设置CSS属性

js访问CSS属性

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的样式

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

   obj.currentStyle
   

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

   window.getComputeStyle("元素","伪类")
   注意：两个选项是必须的，没有伪类用null代替
   

3. 兼容写法

   getStyleAttr: function (obj, attr) {
      if (obj.currentStyle) { // IE 和 opera
           return obj.currentStyle[attr];
       } else {
           return window.getComputedStyle(obj, null)[attr];
       }
   },