获取CSS属性值

getComputedStyle,currentStyle

拭目以待 发布于

jquery有个css方法可以指定dom节点的样式,比如说要获取a标签的文本颜色,可以用$('a').css('color')进行获取,很方便。

而在没有引入jquery的项目中,该如何去获取?


使用到的HTML和CSS:

<div id="test" style="color:red;font-size:16px;">测试区域</div>

#test{
    width: 100px;
    height: 50px;
    line-height: 50px;
    float: left;
}
#test:after{
    color: #ccc;
    height: 55px;
    content: "aa";
}


通过style进行获取

console.log(document.getElementById('test').style.color); //==>'red'
console.log(document.getElementById('test').style.fontSize); //==>'16px'
console.log(document.getElementById('test').style.width); //==>' '
console.log(document.getElementById('test').style.lineHeight); //==>' '
console.log(document.getElementById('test').style.float); //==> ' '

colorfontSize可以获取到,而widthlineHeight却只返回了空字符串。

colorfont-size在节点属性[style]中存在定义,而widthline-height是在css中定义。

由此可以得出结论,.style只能获取到在节点上直接定义的style属性中的样式值。而不能获取通过css文件定义的样式。

那如何获取到由css文件定义的样式值?


通过getComputedStyle进行获取

console.log(window.getComputedStyle(document.getElementById('test')).width); //==> '100px'
console.log(window.getComputedStyle(document.getElementById('test')).height); //==> '50px'
console.log(window.getComputedStyle(document.getElementById('test')).float); //==> 'left'
console.log(window.getComputedStyle(document.getElementById('test')).fontSize); //==> '16px'

通过getComputedStyle可以获取到的样式是CSS与节点属性style合并后的值。需要注意的是:style权重要高于css文件。


getComputedStyle获取伪类样式

//getComputedStyle的第二个参数是指定伪类,如果不指定可以为空或传入null值。并不是必需的
console.log(window.getComputedStyle(document.getElementById('test'), 'after').content); //==> 'aa' 
console.log(window.getComputedStyle(document.getElementById('test'), ':after').height); //==> 'auto' 
console.log(window.getComputedStyle(document.getElementById('test'), ':after').color); //==> 'rgb(204, 204, 204)'

使用:after 或者after都是可以正常显示的。

但是需要注意的是,在伪类中无效设置的属性也是不能准确获取的,比如上面所示的heidht。虽然在after中进行了设置,但是并不能通过after将高度的值获取成功。


兼容处理

function getStyle(id, styleName){
//IE
if(document.getElementById(id).currentStyle){
return document.getElementById(id).currentStyle[styleName]; 
//其它
}else{ 
return window.getComputedStyle(document.getElementById(id))[styleName]; 
} 
} 
console.log(getStyle('test', 'fontSize')); //==>'16px'


getComputedStyle兼容IE9以上,如果要支持IE9以下,可以用IE自带的currentStyle属性

其实我觉着IE的currentStyle没有被纳入规范是比较遗憾的,直接使用dom节点的属性进行样式获取是比通过window.getComputedStyle()方法更方便合理