读写css属性
dom.style.prop dom上有一个style属性可以查看更改行间样式。
-
var div=document.getElementsByTagName('div')[0];
div.style返回了一个类数组，里面装着各种各样的css属性，我们写的属性的确都在里面，这个比较简单吧。
我们也可以更改属性值
我们更改属性值是可以的.
我们把代码改一下：
-
var div=document.getElementsByTagName('div')[0];
.demo{
width:100px;
}
然后我们通过刚刚的方法来遍历width属性
意料之中，刚刚就说了div只能访问行间样式咯，没有在行间样式写出来即使存在也不会有值
我们写值也会在行间样式中表现出来
注意：
dom.style.prop可以读写行间样式，没有兼容性问题，碰到float这样的css保留字，那么前面应该加css 譬如cssfloat
复合属性最好拆解（比如border有很多属性，我们就用小驼峰式组和单词一个一个属性进行赋值)
譬如:border="2px solid black"；
我们应该换成div.border.borderWidth='2px'等等分开写。
写入的值是字符串
查询计算样式
window.getComputedStyle(ele,null)
第一个填操作dom对象，第二个一般填null也可以填其他的获取伪元素属性点击打开链接
-
var div=document.getElementsByTagName('div')[0];
基本把css所有属性都给我们返回了，也是一个类数组，我们同样可以通过相同的方法来返回各种属性，注意这个样式就是显示的样式和前面一个不一样（不是行间的）。
表现出什么就返回什么，这个比较准确。
注意这个不允许写的
返回的值都是绝对值，没有相对单位比如em就会给我们返回多少px
IE8和IE8以下不兼容
IE8和IE8以下查询属性dom.currentStyle（chrome没有办法演示）
样式只能读，返回的不是绝对值，ie独有属性
和上面的调用方法差不多，div.currentStyle.width就行了
我们封装一个方法，在任何浏览器下都可以使用的方法，查询dom元素的某一个属性
function getStyle(ele,prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele,null)[prop];
}
else return ele.currentStyle[prop];
}
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3173/viewspace-2808659/ ，如需转载，请注明出处，否则将追究法律责任。
