javascript dom编程艺术学习笔记之CSS-DOM

javascript dom编程艺术学习笔记之CSS-DOM

@(JavaScript)[学习笔记]

[TOC]

1.三位一体的网页

网页由以下三层信息构成一个共同体

结构层

表示层

行为层
结构层
有HTML或XHTML之类的标记语言创建
表示层
由CSS完成。描述页面如何呈现
行为层
负责内容如何响应事件这一问题，由javascript和DOM构成
分离
三种技术之间有潜在重叠的区域。例如可以用dom创建标记
css利用伪类走进DOM领地

2.stytle属性

每个元素节点都有一个属性stytle。stytle属性包含着元素的样式，查询这个对象将返回一个对象而不是一个字符串。

element.stytle.property

2.1 获取样式

element.stytle.color

获取对象的color属性
font-family不能这样获取，因为连接字符与减法操作符相同，javascript会解释为减法
DOM要求使用驼峰命名法来命名中间带有减号的CSS属性
例如：

element.stytle.fontFamily

DOM表示样式属性采用的单位并不总是和CSS样表设置的相同
例如：把color的属性值改为#999999，在某些浏览器中会以rgb的方式返回
CSS速记属性可以把多个样式组合一起写成一行

font: 12px 'Arial' , sans-serif;

DOM能解析这样的速记
stytle属性只能返回内嵌样式不符合平稳退化原则
有另一种情况可以让stytle属性正确反射我们设置的样式

2.2 设置样式
许多属性是只读的，stytle对象的各个属性就是读写的
可以给属性赋值

para.stytle.font = "2em 'Tiems' ,serif"

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

3.1 根据元素在节点树的位置来设置样式
CSS无法根据元素的相对位置关系找出某个特定的元素，DOM可以做到

function styleHeaderSiblings() {
if (!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
for (var i=0; i<headers.length; i++) {
var elem = getNextElement(headers[i].nextSibling);
addClass(elem,"intro");
}
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
addLoadEvent(styleHeaderSiblings);

理论上讲应该用类样式来设置。如果内容需要定期编辑和刷新，添加class就成为一种负担

3.2 根据某种条件反复设置某种样式
标记语言

<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland, <abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle, <abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento, <abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>

若支持CSS3，很简单两行就可以设置成功
可以用javascript编写函数设置斑马线效果，只需要隔行设置样式就ok

找出文档中所有table元素

对每个table元素，创建odd变量把它初始化为false

遍历表格的所有数据行

如果变量odd的值是true，设置样式并把odd变量修改为false

如果变量odd的值是false，不设置样式，把odd变量修改为true

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

有一个问题，table每一行都被设置为false，如何交替？

3.3 响应事件
CSS提供伪类根据元素状态改变样式，DOM也可以通过onmouseover等事件对html响应。
很难判断使用那个
如果只是想让链接在鼠标指针悬停改变颜色，可以用CSS
如果鼠标悬停加粗，部分浏览器可以用CSS加粗，DOM却都可以得到公平对待

function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
rows[i].onmouseover = function() {
this.style.fontWeight = "bold";
}
rows[i].onmouseout = function() {
this.style.fontWeight = "normal";
}
}
}
addLoadEvent(highlightRows);

考虑使用CSS还是DOM

这个问题最简单的解决方案是什么

哪种解决方案得到更多浏览器支持

4. className属性

与其使用DOM更改样式，不如使用javascript更新元素的属性

function styleHeaderSiblings() {
if (!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
for (var i=0; i<headers.length; i++) {
var elem = getNextElement(headers[i].nextSibling);
elem.stytle.fontWeight = "bold";
elem.stytle.fontSize = "1.2em";
}
}

如果修改CSS的字号，就不得不去改这个函数
如果引用一个外部样式表，针对.intro类样式声明
你只需要把紧跟一级标题后的元素设置为intro就可以达到目的。
可以用setAttribute方法来做这件事

elem.setAttribute("class", "intro");

更简单的方法是更新className属性

function styleHeaderSiblings() {
if (!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
for (var i=0; i<headers.length; i++) {
var elem = getNextElement(headers[i].nextSibling);
**elem.className = "intro";**
}
}

这个技巧有个不足，className会把原来的属性替换掉，而不是追加原有的class设置
我们需要追加效果

elem.className += " intro";

操作步骤如下：

检查className属性值是否为null

如果是，把新的class直接赋值给className

如果不是，把一个空格和新的值追加到className属性上

function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
element.className+= " ";
element.className+= value;
}
}

5. 对函数进行抽象

把一个非常具体的东西改进为一个较为通用的东西叫抽象
stytleHeaderSiblings函数中，可以传递给两个形参，tag和theClass
这样会很通用