浅谈脚本化css（二）

查询计算样式

window上面有一个方法叫做getComputedStyle可以来获取元素的计算样式，也就是css样式。

  window.getComputedStyle(ele. null);

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这里的样式是取优先级最高的，不只是行间样式，所有的只要是表现出来的样式都可以获取出来。

同时，返回的计算样式的值都是绝对值，没有相对单位。

我们写的">这个方法有两个参数，第一个参数是我们要获取的元素。

第二个参数是一个字符串，代表我们是否要获取这个元素上面的某一个伪元素，如果不的话，就填写null，否则就填写要获取的这个元素的哪一个伪元素。

  div:after{
         width: 100px;
         height; 100px;
         background-color: red;
   }
   window.getComputedStyle(div, ‘after’).width= 100px；

CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

但是很遗憾的是IE8以及以下的版本不兼容这个方法。

IE8有一个特殊的样式currentStyle。

dom.currentStyle也会返回一个样式表，和上面的基本一样，唯一的区别在于返回的计算样式的值不是经过转换的绝对值，而是我们写什么值就会返回什么值。

现在有了这些方法和属性，我们就可以封装一个兼容性的获取样式的函数了。

   function getStyle(obj, prop, fake) {
       var fake = fake || null;
       if(obj.currentStyle) {
           return obj.currentStyle[prop];
       }else {
           return window.getComputedStyle(obj, fake)[prop];
       }
   }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

• 脚本化样式表

在document上有一个属性叫做styleSheets，这个属性储存了一个html文档所有的css样式表的集合，我们可以来操作style标签，不过在实际中基本是用不到的，所以这里就不过多介绍了。