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

来源：互联网发布：数据库层次模型编辑：程序博客网时间：2024/04/29 15:27

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

0 0

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

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