CSS-DOM

 

1、三位一体的网页

网页由三部分组成：结构层（HTML/XHTML，核心部分）；表示层（由CSS负责完成）；行为层（JavaScript和DOM）。

 

2、style属性更改样式

Style属性包含元素的样式，是一个对象，而非字符串，样式都放在style对象的属性里。可直接读写。

Eg：<p id="test" style="color:gray;"></p>

p.style.color = red; 直接赋值。

 

【注意】当引用一个中间带减号的CSS属性时，DOM要求用驼峰命名法。即：p.style.fontFamily，它的值是sans-serif。

DOM在表示样式属性时，采用的单位并不总是与它们在CSS样式表里的设置相同。如CSS设置颜色为gray，JavaScript检索出的也是gray，但若CSS设置为#999999，JavaScript检出为rgb（153,153,153）。

DOM可以解析像font这样的速记属性。

 

Style只能返回内嵌样式，若样式设置放在head标签或在css文档中，就没有作用了。所以，若要修改元素的样式，只能在JavaScript代码中通过设置style属性值进行修改。Style对象的属性值永远是一个字符串，且必须放在引号里，单引号或双引号均可，否则会认为将一个变量赋给style。

 

3、何时用DOM脚本设置样式

除了可以再JavaScript代码中，定位某个元素节点，然后对其style对象赋值来设置样式，也可以给元素节点添加或更改class值，使之与CSS文档中的相应选择器一致，也可以改变节点的样式。

 

如此看来，修改class属性能更好的控制元素样式，且使得行为与表现分离。但什么时候用DOM脚本设置样式呢？

根据元素在节点树里的位置来设置样式；

当然，浏览器不支持CSS的位置选择器时，势必要用的。当文档的内容需要定期编辑和刷新，添加class属性会成为一种负担，这时也要用的。

根据某种条件反复设置某种样式；

比如在表格中，要求交替改变行的背景色。

响应事件

虽然CSS也有伪类，但多数浏览器对其伪类支持很不完整。

 

 

 

4、className属性

设置元素的class值，两种方法：

Element.setAttribute(“class”, “value”);

Element.className = “value”;