javascript
JavaScript之Style属性学习
當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"; //當前行的背景色變成#ffcthis.style.fontWeight = "bold"; //當前行的字體顏色加粗this.style.fontWeight = "normal"; //當前行的字體從加粗變為正常這三段代碼分別利用style屬性設置了當我們的動作發生時,table表格相應的會做那些變化；
但是我們仔細思考下，如果這里有一天我們的需求變了,這個表格隔行變色的背景色了,我們要換個顏色,這時候我們又要來修改js代碼,而且這不是關鍵,關鍵是如果我們還需要加其他的顯示效果，這個時候為了加這個效果,我們必須在加一行代碼,所以這種方式添加效果的方式并不是很好。所以這個時候如果把Css和JavaScript結合往往能產生很好的效果,關于這個你可以去我的下一個隨筆關于className屬性的介紹http://www.cnblogs.com/GreenLeaves/p/5757216.html
這篇隨筆就是教我們如何通過DOM的className屬性來減少我們對控制元素樣式的代碼量。
轉載于:https://www.cnblogs.com/GreenLeaves/p/5753942.html
總結
以上是生活随笔為你收集整理的JavaScript之Style属性学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle case when的用法
- 下一篇： 《JS权威指南学习总结--开始简介》