这篇文章主要介绍几种查看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);
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
这里的样式是取优先级最高的,不只是行间样式,所有的只要是表现出来的样式都可以获取出来。
同时,返回的计算样式的值都是绝对值,没有相对单位。
我们写的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
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标签,不过在实际中基本是用不到的,所以这里就不过多介绍了。
最后我们可以写一个让小方块运动的函数:
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);