JavaScript学习笔记——DOM基础 2.6
一、CSS-DOM
1、清楚一个概念
HTML负责的是结构，CSS负责的是样式，JavaScript负责的是动作（行为）。
2、style属性
语法：element.style
返回：object
style相对于element是一个属性，而style本身是一个对象，它包含了诸多元素的样式。
关于这一点，可以根据后面的例子去理解。
3、获取样式
例子：element.style.fontFamily
返回：style对应属性的值，如fontFamily，返回“Microsoft yahei”
注意：style.后面的"驼峰式"命名规则
<!doctype html> <html> <head> <meta charset="utf-8"> <title>筱雨生 - 博客园</title> <script> window.onload = function(){ var myPara = document.getElementById('myPara'); var myFontSize = myPara.style.fontSize; var myFontColor = myPara.style.color; alert(myFontSize); alert(myFontColor); } </script> </head> <body> <h1>筱雨生</h1> <p id="myPara" style="font-size:1em; color:rgba(162,47,49,1.00);">時光飛逝，莫讓網絡蹉跎了歲月</p> <div id="myBlog"> <ul> <li title="JavaScript">JavaScript</li> <li title="HTML">HTML</li> <li title="CSS">CSS</li> <li title="我的随笔">我的随笔</li> <li></li> </ul> </div> </body> </html>
注意：通过style属性获取样式有很大的局限性，因为style属性只能返回内嵌样式，“内嵌”意味着style属性只有在插入HTML标签时，才可以获取到相应的值，也就是说，如果css写在外部，你将获取不到style的属性值。
4、设置样式
我们可以通过DOM的属性来获取元素节点的位置，从而设置它的样式。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>筱雨生 - 博客园</title> <script> window.onload = function(){ var myPara = document.getElementById('myPara'); var myFontSize = myPara.style.fontSize; var myFontColor = myPara.style.color; myPara.onmouseover = function(){ myPara.style.fontSize = '2em'; myPara.style.color = 'rgba(250,0,0,1)'; } myPara.onmouseout = function(){ myPara.style.fontSize = '1em'; myPara.style.color = 'rgba(162,47,49,1.00)'; } } </script> </head> <body> <h1>筱雨生</h1> <p id="myPara" style="font-size:1em; color:rgba(162,47,49,1.00);">時光飛逝，莫讓網絡蹉跎了歲月</p> <div id="myBlog"> <ul> <li title="JavaScript">JavaScript</li> <li title="HTML">HTML</li> <li title="CSS">CSS</li> <li title="我的随笔">我的随笔</li> <li></li> </ul> </div> </body> </html>
5、previouseSibling与nextSibling
elementNode.previousSibling返回的是与之紧邻的上一个同级的节点，如果不存在这个节点，则返回null。
elementNode.nextSibling返回的是与之紧邻的下一个同级的节点，如果不存在这个节点，则返回null。
由于在很多浏览器中，会把空格和换行当作文本节点，所以直接应用previousSibling和nextSibling属性的时候就会比较苦逼。
二、响应事件
CSS提供的：hover等伪class属性允许我们根据HTML元素的状态来改变样式，DOM也可以通过onmouseover等事件对HTML元素的状态变化进行响应。
由于CSS提供的伪类不是所有浏览器都可以看到效果，所以有些时候我们不得以用DOM的方法去实现一些想要的效果。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>筱雨生 - 博客园</title> <style> *{margin:0; padding:0;} body{ font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif,"Microsoft Yahei"; background:#fff; padding:50px; color:#333; } h1{ font-family:"Microsoft Yahei"; font-weight:normal; margin-bottom:.2em; } p{font-size:.6em;color:#999;} table{border-collapse:collapse;} caption{ font-size:.9em; padding:1em; } td{ width:400px; text-align:center; height:5em; border:1px solid #999; } </style> <script> function addOnLoadEvent(func){ var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数 window.onload = func; // 将这个函数绑定到window.onload事件 }else{ window.onload = function(){ // 如果这个处理函数已经绑定了函数，就把这个函数追加到指令的末尾 oldonload(); func(); } } } function stripeTables(){ if(!document.getElementsByTagName) return false; var tables = document.getElementsByTagName('table'); var odd,rows; for(var i=0; i<tables.length; i++){ odd = false; rows = tables[i].getElementsByTagName('tr'); for(var j=0; j<rows.length; j++){ if(odd == true){ rows[j].style.backgroundColor = '#ffc'; odd = false; }else{ odd = true; } } } } addOnLoadEvent(stripeTables); function highLightTr(){ if(!document.getElementsByTagName) return false; var highLightTr = document.getElementsByTagName("tr"); for(var i=0; i<hightR.length; i++){ highLightTr[i].onmouseover = function(){ this.style.fontWeight = 'bold'; } highLightTr[i].onmouseout = function(){ this.style.fontWeight = 'normal'; } } } addOnLoadEvent(hightLightTr); </script> </head> <body> <h1>筱雨生</h1> <p>時光飛逝，莫讓網絡蹉跎了歲月</p> <div id="myBlog"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <caption>我的博客分类</caption> <tbody> <tr> <td>Windows</td> <td>iOS </td> <td>Android</td> </tr> <tr> <td>JavaScript</td> <td>HTML </td> <td>CSS</td> </tr> <tr> <td>ActionScript</td> <td>Animate</td> <td>Others</td> </tr> </tbody> </table> </div> </body> </html>
上面这个实例中，stripeTables函数用来实现HTML中表格的偶数行的背景色，当然这个函数还可以衍化成其他；highLightTr函数是用来高亮显示一行的数据。
三、className属性
语法：element.className
返回：一个value值，如果myElement.className = 'title';
<!doctype html> <html> <head> <meta charset="utf-8"> <title>筱雨生 - 博客园</title> <link href="style.css" rel="stylesheet" type="text/css"> <script> window.onload = function(){ if(!document.getElementsByTagName) return false; var myTitle = document.getElementsByTagName('h1'); var myElement = myTitle[0]; myElement.className = 'title'; } </script> </head> <body> <h1>筱雨生</h1> <p>時光飛逝，莫讓網絡蹉跎了歲月</p> <div id="myBlog"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <caption>我的博客分类</caption> <tbody> <tr> <td>Windows</td> <td>iOS </td> <td>Android</td> </tr> <tr> <td>JavaScript</td> <td>HTML </td> <td>CSS</td> </tr> <tr> <td>ActionScript</td> <td>Animate</td> <td>Others</td> </tr> </tbody> </table> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ *{margin:0; padding:0;} body{ font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif,"Microsoft Yahei"; background:#fff; padding:50px; color:#333; } h1{ font-family:"Microsoft Yahei"; font-weight:normal; margin-bottom:.2em; } p{font-size:.6em;color:#999;} table{border-collapse:collapse;} caption{ font-size:.9em; padding:1em; } td{ width:400px; text-align:center; height:5em; border:1px solid #999; } .title{ font-family:"Microsoft Yahei"; font-weight:normal; margin-bottom:.2em; color:#AA0002; }
上面这个实例中，通过className属性给h1元素节点设定了新的CSS，新的CSS并非来自元素节点的属性，而是来自于外部CSS。
四、题外话
嗨，哈利波特，你的魔法秘籍看到第几章了，能借给我瞅瞅不？
