js访问CSS最终计算样式

所谓计算样式，就是嵌入式样式、外部样式表、内联样式综合的样式表现，那么如何来获取呢？

“DOM2 级样式”增强了document.defaultView，提供了getComputedStyle()方法，可以调用最终的样式。

这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素信息，第二个参数可以是null。

getComputedStyle()方法返回一个CSSStyleDeclaration 对象（与style 属性的类型相同），其中包含当前元素的所有计算的样式。

以下面这个HTML 页面为例:

<!DOCTYPE html>
<html>
<head>
<title>Computed Styles Example</title>
<style type="text/css">
#myDiv {
    background-color: blue;
    width: 100px;
    height: 200px;
}
</style>
</head>
<body>
    <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
</body>
</html>

js:

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); // "red"，不是blue

后面就可以通过 computedStyle 来访问最终的样式了！

但是，边框属性可能会也可能不会返回样式表中实际的border 规则（Opera 会返回，但其他浏览器不会）。存在这个差别的原因是不同浏览器解释综合（rollup）属性（如border）的方式不同，因为设置这种属性实际上会涉及很多其他属性。在设置 border 时，实际上是设置了四个边的边框宽度、颜色、样式属性（ border-left-width 、border-top-color 、border-bottom-style ，等等）。因此，即使 computedStyle.border 不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth 会返回值！

但是！IE9之前版本不支持 getComputedStyle() 方法;

在IE 中，每个具有style 属性的元素还有一个 currentStyle 属性。这个属性是CSSStyleDeclaration 的实例，包含当前元素全部计算后

的样式。取得这些样式的方式也差不多，如下面的例子所示。

var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"

所以兼容下IE9之前版本，代码就是这个样子：

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle;
alert(computedStyle.backgroundColor); // "red"，不是blue

当然除了这个方法，js高程里还有另外一个方法，去获取样式表的内容，然后一个个去调用样式表，去改，但是我觉得太麻烦了，要学的去翻书哦~

参考资料：

JavaScript高级程序设计-第3版

posted @ 2017-12-26 16:32 xianshenglu 阅读(344) 评论(0) 编辑收藏举报

刷新页面返回顶部

xianshenglu

js访问CSS最终计算样式

公告