浅谈脚本化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标签，不过在实际中基本是用不到的，所以这里就不过多介绍了。