深刻理解脚本化CSS系列第二篇——查询计算样式

前面的话

　　元素的渲染结果是多个CSS样式博弈后的最终结果，这也是CSS中的C(cascade)层叠的含义。访问第一篇中的style属性只能获取行间样式，这一般来讲，并非咱们想要的结果。本文将详细介绍如何查询计算样式

 

getComputedStyle()

　　元素的计算样式(computedStyle)是一组在显示元素时实际使用的属性值，也是用一个 CSSStyleDeclaration对象来表示的，但计算样式是只读的，主要经过getComputedStyle()方法实现

　　getComputedStyle()方法接收两个参数：要取得计算样式的元素和一个伪元素字符串。若是不须要伪元素信息，第二个参数能够是null。getComputedStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的全部计算的样式

　　[注意]IE8-浏览器不支持

　　getComputedStyle()方法本来是window对象下的方法，后来“DOM2级样式”加强了document.defaultView，也提供了getComputedStyle()方法。因此getComputedStyle()方法一共有下面3种写法

　　一、document.defaultView.getComputedStyle(div).width

　　二、window.getComputedStyle(div).width

　　三、getComputedStyle(div).width

　　其中第3种写法最简单

<div id="test" style="width: 100px;"></div>
<script>
//下面三行代码的结果都同样，IE8-浏览器报错，其余浏览器返回'100px'
console.log(document.defaultView.getComputedStyle(test).width);
console.log(window.getComputedStyle(test).width);
console.log(getComputedStyle(test).width);
</script>

伪元素

　　第二个参数表明伪元素字符串，包括":before"、":after"、":first-line"等，若是设置为null或省略不写，则返回自身元素的CSSStyleDeclaration对象

　　[注意]关于伪元素的详细内容移步至此

<style>
#test:before{
    content:'';
    width:20px;
    display:inline-block;
}
</style>
<div id="test" style="width: 100px;"></div>
<script>
//IE8-浏览器报错，其余浏览器返回'20px'
console.log(getComputedStyle(test,':before').width);
</script>

 

注意事项

　　在使用getComputedStyle()方法的过程当中，有以下注意事项：

　　【1】对于font、background、border等复合样式，各浏览器处理不同。chrome会返回整个复合样式，而IE9+、firefox和safari则输出空字符串''

<div id="test" style="font-size:20px"></div>
<script>
//IE8-浏览器报错，chrome返回normal normal normal normal 20px / normal Simsun，其余浏览器返回''
console.log(getComputedStyle(test).font);
</script>

　　【2】不论以什么格式设置颜色，浏览器都以rgb()或rgba()的形式输出

<div id="test" style="color:red"></div>
<script>
//IE8-浏览器报错，其余浏览器返回rgb(255, 0, 0)
console.log(getComputedStyle(test).color);
</script>

　　【3】在计算样式中，相似百分比等相对单位会转换为绝对值

<div id="test" style="width:20%;"></div>
<script>
//IE8-浏览器报错，其余浏览器返回'304px'
console.log(getComputedStyle(test).width);
</script>

 

currentStyle

　　IE8-浏览器不支持getComputedStyle()方法，但在IE中每一个具备style属性的元素有一个currentStyle属性，这个属性是CSSStyleDeclaration的实例，包含当前元素所有计算后的样式

<div id="test" style="font-size:20px;color:red;width:20%;"></div>
<script>
//IE8-浏览器返回undefined，IE9+浏览器返回''
console.log(test.currentStyle.font);
//IE浏览器返回red
console.log(test.currentStyle.color);
//IE浏览器返回20%
console.log(test.currentStyle.width);
</script>

　　由以上结果看出，currentStyle属性中的计算样式并不会输出集合样式，对颜色、百分比设置不会进行相应转换，而是原样输出

兼容

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}

<div id="test" style="width:20px;"></div>
<script>
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}    
console.log(getCSS(test,'width'));//20px
</script>

 

IE

　　IE9+浏览器的getComputedStyle()方法和IE浏览器的currentStyle属性有一个特别的地方，就是能够识别自定义样式的值，虽然没法正常渲染，可是能够取出值

<div id="test" style="a:1"></div>
<script>
//其余浏览器输出undefined，而IE9+浏览器输出1
console.log(getComputedStyle(test).a);
//其余浏览器输出undefined，而IE浏览器输出1
console.log(test.currentStyle.a);
</script>

opacity

　　虽然IE8-浏览器没法对opacity属性进行正常渲染，但能够读出opacity属性的值。这对于opacity属性来讲无疑是一个好消息

<div id="test" style="opacity:0.5"></div>
<script>
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}    
console.log(getCSS(test,'opacity'));//0.5
</script>    

 

最后

　　通常地，咱们经过getComputedStyle()方法或currentStyle属性得到元素的计算样式，但要得到元素精确的位置和尺寸信息，查询元素的计算样式并非个好主意，由于相似padding、width等单同样式并不直接反映元素的位置和尺寸信息，这些信息是多个样式综合做用的结果。因此，最好使用前面介绍过的关于元素视图的offset、client、scroll和getBoundingClientRect()等来获取

　　欢迎交流