javascript DOM编程艺术笔记——CH9 CSS-DOM

本章内容：

如何用DOM获取，设置CSS信息（style）。

网页结构

网页可以分为三层：

结构层（HTML）

表示层 (CSS)

行为层 (JS和DOM)

三种技术互相之间会有重叠！

style 属性

可以用element,style.color 来获取属性

font-family 之类的属性需要使用驼峰命名法

element.style.fontFamily

只能获取内嵌样式——>太过局限，因此用另一种方法：DOM来设置样式，再用DOM检索

用节点树位置来设置样式

DOM可以根据元素之间的相对位置来找出某个特定的元素。

example：

设置H1标签后面的下一个元素的样式。

效果如下图：

步骤：

遍历文档找到H1标签和相应的下一个元素

设置style

js代码：

function styleHeaderSiblings() {
if (!document.getElementsByTagName) return false;
//得到所有的H1元素
var headers = document.getElementsByTagName("h1");
var elem;
for (var i=0; i<headers.length; i++) {
elem = getNextElement(headers[i].nextSibling);//寻找下一个元素
elem.style.fontWeight = "bold";//必须加引号
elem.style.fontSize = "1.2em";
}
}
function getNextElement(node) {
if(node.nodeType == 1) {//若为元素节点，则返回，否则找下一个节点
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;//若之后没有元素节点，则返回null
}

addLoadEvent(styleHeaderSiblings);

highlights:

1. 寻找下一个元素而不是节点。

2. 设置style时，值必须加引号。

重复设置样式

表格样式的设置。行颜色交替。

效果如下：

步骤：

遍历文档找出table元素

每个元素创建odd变量初始为false

遍历所有数据行

若odd是true，则设置颜色并改为false，否则不设置样式，改为true。

code：

function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd, rows;
for (var i=0; i<tables.length; i++) {
odd = false;
rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
rows[j].style.backgroundColor = "#ffc";
odd = false;
} else {
odd = true;
}
}
}
}
addLoadEvent(stripeTables);

相应事件

CSS提供：hover等伪类来改变样式，DOM可以用onmouseover事件

但是除链接外，支持：hover的浏览器不多。此时要用到DOM

className属性

DOM改变属性有个问题：当你想修改的时候不得不在大量代码中寻找。

简单的解决办法是：用 javascript 来更新元素的class属性。

function styleHeaderSiblings() {
if (!document.getElementsByTagName) return false;
//得到所有的H1元素
var headers = document.getElementsByTagName("h1");
var elem;
for (var i=0; i<headers.length; i++) {
elem = getNextElement(headers[i].nextSibling);//寻找下一个元素
elem.style.fontWeight = "bold";//必须加引号
elem.style.fontSize = "1.2em";
}
}

修改为：

.intro {

font-weight: bold;

font-size: 1.2em;

}

function addClass(element,value) {//不取代原来的类
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
function styleHeaderSiblings() {
if (!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
var elem;
for (var i=0; i<headers.length; i++) {
elem = getNextElement(headers[i].nextSibling);
addClass(elem,"intro");
}
}

总结：

之前的DOM方法包括了DOM-CORE,HTML-DOM,这章讲了CSS-DOM。

style属性的限制是无法获取外部css的样式，但是我们仍然可以利用它改变样式。

最好选择更新className属性而不是直接更新style对象的有关属性。