元素的渲染结果是多个 CSS 样式博弈后的最终结果,这也是 CSS 中的 C(cascade) 层叠的含义。访问中的 style 属性只能获取行间样式,这通常来说,并不是我们想要的结果。本文将详细介绍如何查询计算样式
元素的计算样式 (computedStyle) 是一组在显示元素时实际使用的属性值,也是用一个 CSSStyleDeclaration 对象来表示的,但计算样式是只读的,主要通过 getComputedStyle()方法实现
getComputedStyle() 方法接收两个参数:要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息,第二个参数可以是 null。getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象,其中包含当前元素的所有计算的样式
[注意]IE8 - 浏览器不支持
getComputedStyle() 方法原本是 window 对象下的方法,后来"DOM2 级样式 "增强了 document.defaultView,也提供了 getComputedStyle() 方法。所以 getComputedStyle() 方法一共有下面 3 种写法
1、document.defaultView.getComputedStyle(div).width
2、window.getComputedStyle(div).width
3、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 对象
[注意] 关于伪元素的详细内容
#te">
- #te "><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>
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>
一般地,我们通过 getComputedStyle() 方法或 currentStyle 属性获得元素的计算样式,但要获得元素精确的位置和尺寸信息,查询元素的计算样式并不是个好主意,因为类似 padding、width 等单一样式并不直接反映元素的位置和尺寸信息,这些信息是多个样式综合作用的结果。所以,最好使用前面介绍过的关于元素视图的、、和等来获取
欢迎交流
来源: http://www.cnblogs.com/xiaohuochai/p/5838686.html