JS DOM 编程艺术(第2版)读书笔记 第9章 CSS-DOM
页面有三层信息构成：
结构层（structural layer）
表示层（presentation layer）
行为层（behavior layer）
设置和获取样式
所有CSS中 间带减号的在JS 中用驼峰命名法
css：font-size
js：fontSize
只读的属性：
previousSibling、 nextSibling、 parentNode、 firstChild、 lastChild
style对象的属性可读可写：
style.top、style.width、style.height 等
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>设置样式</title>
6 <style type="text/css">
7 table,td{border:1px solid #999;}
8 td{line-height:22px;padding-left:10px;}
9 .intro{font-weight:bold;color:red;}
10 .odd{background:#CCC;}
11 </style>
12 </head>
13 <body>
14
15 <h1>txt1</h1>
16 <p>content1</p>
17 <h1>txt2</h1>
18 <p>content2</p>
19
20 <table width="100%" cellspacing="0" cellpadding="0">
21 <tr>
22 <td>1-1</td>
23 <td>1-2</td>
24 </tr>
25 <tr>
26 <td>2-1</td>
27 <td>2-2</td>
28 </tr>
29 <tr>
30 <td>3-1</td>
31 <td>3-2</td>
32 </tr>
33 <tr>
34 <td>4-1</td>
35 <td>4-2</td>
36 </tr>
37 <tr>
38 <td>5-1</td>
39 <td>5-2</td>
40 </tr>
41 </table>
42 <script type="text/javascript">
43 /**
44 * 设置 h1 下一个节点的样式
45 *
46 */
47 function setHeaderSiblingStyle() {
48 var h1 = document.getElementsByTagName("h1");
49 var elem;
50 for (var i = 0; i < h1.length; i++) {
51 elem = getNextElement(h1[i].nextSibling);
52 /*
53 elem.style.fontWeight = "bold";
54 elem.style.color = "red";
55 */
56 addClass(elem, "intro");
57 }
58 }
59 addLoadEvent(setHeaderSiblingStyle);
60
61 function getNextElement(node) {
62 if (node.nodeType == 1) {
63 return node;
64 }
65 if (node.nextSibling) {
66 return getNextElement(node.nextSibling);
67 }
68 return null;
69 }
70
71 /**
72 * 设置隔行变色的表格
73 *
74 */
75 function stripeTables() {
76 var tables = document.getElementsByTagName("table");
77 var odd, rows;
78 for (var i = 0; i < tables.length; i++) {
79 odd = false;
80 var tr = document.getElementsByTagName("tr");
81 for (var j = 0; j < tr.length; j++) {
82 if (odd == true) {
83 //tr[j].style.backgroundColor = "#CCC";
84 addClass(tr[j], "odd");
85 odd = false;
86 }else {
87 odd = true;
88 }
89 }
90 }
91 }
92 addLoadEvent(stripeTables);
93
94 function addClass(elem, value) {
95 var newClass;
96 if (!elem.className) {
97 elem.className = value;
98 }else {
99 newClass = elem.className;
100 newClass += " ";
101 newClass += value;
102 elem.className = newClass;
103 }
104 }
105
106 /**
107 * 鼠标滑过 文字高亮
108 *
109 */
110 function highLightRows() {
111 var tr = document.getElementsByTagName("tr");
112 for (var i = 0; i < tr.length; i++) {
113 tr[i].onmouseover = function(){
114 this.style.fontWeight = "bold"
115 this.style.color = "red";
116 }
117 tr[i].onmouseout = function(){
118 this.style.fontWeight = "normal";
119 this.style.color = "";
120 }
121 }
122 }
123 addLoadEvent(highLightRows);
124
125
126 // onload 事件
127 function addLoadEvent(func) {
128 var oldonload = window.onload;
129 if(typeof oldonload != "function"){
130 window.onload = func;
131 }else{
132 window.onload = function(){
133 oldonload();
134 func();
135 }
136 }
137 }
138
139 </script>
140
141 </body>
142 </html>
