當CSS使用偽類開始侵入DOM和JavaSCript所控制着的行為層時,DOM和JavaScript也使用他們的一系列樣式去控制表現層,這篇隨筆主要說的就是利用JavaScript去控制元素的表現形式,
一、Style屬性
文檔中的每一個元素都是一個對象,每個對象又有着各式各樣的屬性。有一些元素告訴我們元素在節點樹上的位置信息。比如說,parentNode、nextSibling、previousSibling、childNodes、
firstChild、lastChild這些屬性,就告訴了我們文檔中各節點的之間的關系信息。又有一些屬性比如nodeType、nodeName、nodeValue(這個屬性注意只能獲取文本元素節點的節點值)這些屬性,告訴我們元素本身的信息。
除此之外,文檔的每個元素都還有一個屬性style。style屬性包含着元素的樣式，查詢這個屬性返回的是一個對象而不是一個簡單的字符串。樣式都存放在這個style對象的屬性里。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/utility.js" type="text/javascript"></script> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <style type="text/css"> p { color:blue; } </style> </head> <body> <p>asdas</p> <script type="text/javascript"> window.onload = function () { var para = document.getElementsByTagName("p")[0]; alert(typeof para.style); } </script> </body> </html>
輸出:object; 說明style屬性確實是一個對象；
這樣我們就可以使用DOM的style屬性去獲取對應元素對象的style屬性了,但是這里必須注意,必須謹記的一個地方,DOM 的style屬性只能獲取html標簽內內嵌的style屬性像下面代碼這樣:
<p style="color:Blue; font-size:16px;">asdas</
使用Style屬性的注意點一:
如果標簽的樣式被定義在了外部文件里面,DOM將獲取不到外部文件里面的style屬性值。牢記這點很重要;
也許有人會認為那么這個DOM的style屬性將沒有任何的實用價值,應為我們在開發中一般會將表現和樣式分離,幾乎都會將樣式表放入到外部css文件里面,這個時候就看你怎么使用DOM的style屬性了,因為雖然我們無法獲取外部文件里面的style屬性,但是我們可以獲取我們給DOM設置的樣式,也就是說DOM的style屬性不僅可以獲取元素的style屬性,還能給元素設置style屬性，而我們給元素設置的style屬性我們可以用DOM的style屬性來獲取。
使用Style屬性的注意點二:
當我們使用Style屬性去獲取像font-weight和font-family這類的屬性時,不能這些獲取
目標元素.style.font-weight
應為你如果這樣獲取,JavaScript解釋器會把font-weight中間的‘-’當作減號來看那上面這句代碼的意思就變成(目標元素.style.font)減去weight變量的值,這將完全違背我們的本意.
所以這邊DOM有相關的處理方法,當你需要引用一個中間帶減號的css屬性時,DOM要求你用駝峰命名法。css屬性font-family編程fontFamily,其他類似的屬性也用相同的方法操作。
二、Style屬性實戰
介紹完style屬性之后,下面開始上代碼了,代碼如下
html:
html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body { font-family: "Helvetaica" , "Arial" ,sans-serif; background-color: #fff; color: #000; } table { margin: 0; border: 1px solid #699; } caption { margin:auto; padding:.2em; font-size:1.2em; font-weight:bold; } th { font-weight:normal; font-style:italic; text-align:left; border:1px dotted #699; background-color:#9cc; color:#000; } tr { cursor:pointer; 、 } th,td { width:10em; padding:.5em; } </style> </head> <body> <div>---------</div> <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> <div>---------</div> <div>---------</div> <script src="../js/utility.js" type="text/javascript"></script> <script src="../js/index.js" type="text/javascript"></script> <script type="text/javascript"> var insertposition = document.getElementsByTagName("div")[1];//指定縮略語列表的插入位置 displayAbbreviations(insertposition); var loadeventlist = [stripeTable,displayAbbreviations];//將兩個js方法放入window.onload隊列里面 addOnloadEventlist(loadeventlist); </script> </body> </html>
js代碼:
//設置表格各種特性 function stripeTable() { if (!checkCompatibility) return; var tables = document.getElementsByTagName("table"); for (var i = 0; i < tables.length; i++) { var rows = tables[i].getElementsByTagName("tr"); alert(rows[0].innerHtml); var flag = false; for (var j = 0; j < rows.length; j++) { //表格隔行變色效果邏輯 if (flag == true) { rows[j].style.backgroundColor = "#ffc"; flag = false; } else { flag = true; } //鼠標放上去當前行文本加黑加粗 rows[j].onmouseover = function () { this.style.fontWeight = "bold"; } rows[j].onmouseout = function () { this.style.fontWeight = "normal"; } } } } /* 檢查瀏覽器的兼容性,是否支持查用的DOM方法 check the compatibility of the broswer */ function checkCompatibility() { if (!document.getElementById) return false; if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementsByTagName) return false; if (!document.getElementsByName) return false; return true; } /* addOnloadEvent的擴展版因為每次添加一個函數都需要調用addOnloadEvent()函數,所以為了節省代碼,將需要綁定的函數名寫入到一個數組里面, 然后將數組引用,傳遞給addOnloadEventlist();每次添加,只需將函數名,寫到數組里面即可 @param eventlist -需要與window.onload事件綁定的函數名數組 */ function addOnloadEventlist(eventlist) { if (!eventlist) return false; var oldonload = window.onload; window.onload = function () { for (var i = 0; i < eventlist.length; i++) { eventlist[i](); } } }
說下效果:簡單實現table表格的隔行變色,和當鼠標在數據行上懸浮時,數據加黑加粗顯示;
實現這個效果的關鍵是如下代碼:
rows[j].style.backgroundColor = "#ffc"; //當前行的背景色變成#ffc this.style.fontWeight = "bold"; //當前行的字體顏色加粗 this.style.fontWeight = "normal"; //當前行的字體從加粗變為正常
這三段代碼分別利用style屬性設置了當我們的動作發生時,table表格相應的會做那些變化；
但是我們仔細思考下，如果這里有一天我們的需求變了,這個表格隔行變色的背景色了,我們要換個顏色,這時候我們又要來修改js代碼,而且這不是關鍵,關鍵是如果我們還需要加其他的顯示效果，這個時候為了加這個效果,我們必須在加一行代碼,所以這種方式添加效果的方式並不是很好。所以這個時候如果把Css和JavaScript結合往往能產生很好的效果,關於這個你可以去我的下一個隨筆關於className屬性的介紹http://www.cnblogs.com/GreenLeaves/p/5757216.html
這篇隨筆就是教我們如何通過DOM的className屬性來減少我們對控制元素樣式的代碼量。