javascript dom编程艺术学习笔记之CSS-DOM
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
这样会很通用
