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物件的有關屬性。