浅谈脚本化css（二）

查询计算样式

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

 1 window.getComputedStyle(ele. null);

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

这里的样式是取优先级最高的，不仅是行间样式，全部的只要是表现出来的样式均可以获取出来。

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

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

第二个参数是一个字符串，表明咱们是否要获取这个元素上面的某一个伪元素，若是不的话，就填写null，不然就填写要获取的这个元素的哪个伪元素。

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

 

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

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

IE8有一个特殊的样式currentStyle。

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

如今有了这些方法和属性，咱们就能够封装一个兼容性的获取样式的函数了。

1   function getStyle(obj, prop, fake) {
2       var fake = fake || null;
3       if(obj.currentStyle) {
4           return obj.currentStyle[prop];
5       }else {
6           return window.getComputedStyle(obj, fake)[prop];
7       }
8   }

 

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

• 脚本化样式表

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