js访问CSS最终样式（嵌入式样式、外部样式表、内联样式综合的样式表现）

来源：互联网发布：悦动圈骑行软件编辑：程序博客网时间：2024/05/22 05:08

参考资料：js高程第3版第12章，12.2样式

js里经常会需要修改部分元素的样式，如果样式是这样定义的：

<div id="myDiv" style="background-color:blue; width:10px; height:25px"></div>

那么直接用style对象取就行了，如：

var myDiv = document.getElementById("myDiv");

alert(myDiv.style.backgroundColor); //"blue"

你还可以直接改变他的值，但是 ！

虽然style 对象能够提供支持style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息，

而且也无法调用嵌入式样式（<style></style>）、外部样式表（<link rel="stylesheet" href="te.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高程里还有另外一个方法，去获取样式表的内容，然后一个个去调用样式表，去改，但是我觉得太麻烦了要学的去看

js高程第三版 page335，12.2.2 操作样式表

阅读全文

1 0