Web前端的知识之旅哟——脚本化CSS

这篇文章主要介绍几种查看css样式的方法。

读写css属性

每一个dom元素都有一个属性style，dom.style里面存放的这个元素的行间样式，我们可以通过这个属性来读写元素的行间样式。

注意：

1.我们碰到float这样的关键字属性的时候，前面要加一个css前缀。

float—>cssFloat

2.复合属性必须拆解

border: 1px solid red;

这种属性是不允许出现的，只能写border-width、border-color、border-style。

3.当css中的样式是用“-”连接起来的时候，我们要变成小驼峰式写法。

background-color —> backgroundColor;

这个属性只能读写行间样式，我们写在css的样式是不能获取的，因此我们通过这个属性加样式的时候要注意权重值问题。

同时，我们在js中写样式只能往行间写，永远也写不到css文件里面。

查询计算样式

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


1.  window.getComputedStyle(ele. null);

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

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

我们写的background-color: red会返回rgb(255,0,0)，em单位或者百分比的单位都会化成具体的像素值返回。

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

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


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

但是很遗憾的是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.  }

• 脚本化样式表

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

最后我们可以写一个让小方块运动的函数：


1.   
2.  div#demo {
3.      width: 100px;
4.      height: 100;
5.      position: absolute;
6.      left: 0;
7.      top: 0;
8.  }
9.   
10.   
11.  var div = document.getElementById(‘demo’);
12.  var timer = window.setInterval(function () {
13.      div.style.left = parseInt(getStyle(div, ‘left’)) + 1 + ‘px’;
14.      ifparseInt((getStyle(div, ‘left’)) > 1000) {
15.             clearInterval(timer);
16.      }
17.  }, 10);