《JavaScript Dom 程式設計藝術》讀書筆記-第9章
SS-DOM,本章內容:
style屬性
如何檢索樣式
如何改變樣式
三頁一體的網頁
結構層:由HTML或XHTML之類的標記語言負責建立。標籤(tag)也就是尖括號裡的單詞,對網頁內容的語義含義做出了描述。
表示層:由CSS負責完成。CSS描述頁面內容應該如何呈現。定義這樣一個CSS來宣告:文字段應該使用灰色的Arial字型和另外幾種sans-serif字型來顯示。
<p>{ color:grey; font-family:"Arial",sans-serif; }
行為層:如何響應事件。
style屬性
文件的元素節點都有一個屬性style。style包含著元素的樣式。查詢這個屬性將返回一個物件。樣式都存放在style物件的屬性裡。
element.style.property
例如:
element.style.color
類似font-family這樣的屬性的獲取略有不同,如果輸入:
element.style.font-family
則會出錯。JavaScript會把連字元“-”理解為減號。DOM要求用駝峰命名法修改屬性名字:
element.style.fontFamily
element.style.backgroundColor
element.style.fontWeight
element.style.marginTopWidth
使用CSS速記屬性,可以把多個樣式組合在一起寫成一行。font: 12px 'Arial', sans-serif, CSS font-size
根據某種條件反覆設定某種樣式
表格:
<table> <caption>Itinerary</caption> <thead> <tr> <th>When</th> <th>Where</th> </tr> </thead> <tbody> <tr> <td>June 19</th> <td>Changsha</th> </tr> <tr> <td>June 22</th> <td>Shanghai</th> </tr> </tbody> </table>
對應樣式:
body{ font-family:"helvetica","Arial",sans-serif; background-color:#fff; color:#000; } table{ margin:auto; border:1 px 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; } th,td{ width:10em; padding:.5em }
效果:
希望交替改變每行的背景顏色,形成斑馬線的效果。
如果瀏覽器支援CSS3,則很簡單:
tr:nth-
child(odd) {backgrund-color: #ffc}
tr:nth-
child(even) {backgrund-color: #fff}
nth-
child
規定屬於其父元素的第二個子元素的每個 p 的背景色:
p:nth-child(2)
{
background:#ff0000;
}
如果瀏覽器不支援CSS3,用JavaScript來處理這種重複的任務是最好的了。
function stripeTables(){ if(!document.getElementsByTagName) return false; var tables=document.getElementsByTagName("table"); var odd,rows; for(var i=0;i<tables.length;i++){ odd=true; 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; } } } }
響應事件
比如:讓連結在滑鼠指標懸停在其上時改變顏色。此時選CSS最簡單
a:hover{
color:#c60
}
在滑鼠指標懸停在某個表格行的上方時,該行文字加黑加粗。絕大多數現代瀏覽器,雖然對CSS偽類的支援很不完整,但對DOM有著良好的支援。JavaScript的做法:
function highLightRows(){ if(!document.getElementsByTagName) return false; var rows=document.getElementsByTagName("tr"); for (var i=0;i<rows.length ;i++ ) { rows[i].onmouseover=function(){ this.style.fontWeight="bold"; } rows[i].onmouseout=function(){ this.style.fontWeight="normal"; } } }
在選擇JavaScript還是CSS時,需要考慮的因素:
1. 這個問題最簡單的解決方案是啥
2. 哪個方案能得到更多瀏覽器的支援
如果想改變某個元素的呈現效果,使用CSS,如果想改變某個元素的行為,使用DOM。
className的屬性
與其使用DOM直接改變某個元素的樣式,不如通過JavaScript程式碼去更新這個元素的class屬性。
function addClass(element,value){//直接修改class會覆蓋之前的class效果,最好是增加一個class值 if (!element.className){ element.className=value; }else{ var newClassname=element.className; newClassname+=" "; newClassname=+value; element.className=newClassname; } }
對函式抽象
仔細看看highLightRows函式,就會發現她僅適用於h1元素,className的屬性值也是硬編碼在函式程式碼裡的。修改這些引數,可以讓他成為更通用的引數。
function styleNextSibling(tag,theclass){ if (!document.getElementsByTagName) { return false; } var pi=document.getElementsByTagName(tag); for (var i=0; i<pi.length;i++ ) { var node=pi[i].nextSibling if (nextElement(node)) { elem=nextElement(node); addClass(elem,theclass); } } }
小結:
style屬性最大限制是不支援獲取外部CSS設定的樣式,但仍可以利用style屬性去改變各種HTML元素呈現的效果。只要有可能,就應該選擇更新className屬性,而不是直接更新style物件的有關屬性。