JS DOM 编程艺术(第2版)读书笔记第9章 CSS-DOM-CSDN博客

页面有三层信息构成：
结构层（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>