脚本Css化

读写元素CSS属性

domEle.style.prop

可读写行间样式，没有兼容性问题。

3点需要注意：

1. 复合属性尽量拆解来写，组合属性使用小驼峰式写法

例如：border复合属性，写的时候尽量拆解来写

domEle.style.borderStyle = 'solid'

domEle.style.borderColor = 'red'

domEle.style.borderSize = '2px'

2. 遇到float这样的保留字属性，前面应该加css。

例如： float属性写的时候应写为 dom.Ele.style.cssFloat

3. 写入的值必须是字符串格式

查询计算样式

window.getComputedStyle.(ele,null).style

1. 会获取当前元素的实时信息，不受行间样式和内部样式的影响。

2. 返回的计算样式为为绝对值，没有相对单位。

例如背景为红色，会返回rgb(255,0,0)。宽高如果为百分比或em，会经过计算返回绝对的单位px。

3. 计算样式为只读。

4. IE9以下不兼容。

5. IE独有方法 ele.currentStyle (与window.getCo...作用一样，

但是获取的值不是计算过后的值)

6. 封装方法getStyle()使所有浏览器都兼容查询计算样式。

//读取css样式兼容所有浏览器
function getStyle(ele,prop) {
				
if(window.getComputedStyle) {
					
return window.getComputedStyle(ele,null)[prop];
					
}else {
					
return ele.currentStyle[prop];
					
}
}

*获取伪元素的方法，把null更换为伪元素的标签，即是获取ele里面的伪元素属性

猜你喜欢