脚本化CSS
1.读写CSS属性
- domEle.style.prop
- 可读写行间样式,没有兼容性问题;像float这样的关键字属性应在前面加css。
- float --> cssFloat;
- 复合属性必须拆解,组合单词采用小驼峰式写法
- 写入值必须是字符串格式
2.查询计算样式
- window.getComputedStyle(ele,null)[prop]
- 计算样式只读
- 返回的计算样式的值都是绝对值,没有相对单位
- IE8及其以下的版本不兼容
- ()里第二个参数可以获取伪元素的样式
<style type="text/css">
div{
width:100px;
}
div::after{
content: "";
width:30px;
height:30px;
background-color:yellow;
display:inline-block;
}
</style>
<script type = 'text/javascript'>
window.getComputedStyle(ele,"after");
</script>
```
- ele.currentStyle[prop]
- 计算样式只读
- 返回的计算样式值不是经过转换的绝对值
- IE独有的属性
- 封装获取元素样式的方法getStyle:
```javascript
function getStyle(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}