JavaScript學習9：DOM動作表格及樣式，javascriptdom

JavaScript學習9：DOM動作表格及樣式，javascriptdom

        DOM在操作產生HTML上，還是比較簡單明了的。不過，由於瀏覽器總是存在相容和陷阱，導致最終的操作就不是那麼簡單方便了。那本文今天就來瞭解一下DOM如何動作表格和樣式。

        一 動作表格

        <table>標籤是HTML中結構最為複雜的一個，我們可以通過DOM來建立產生它，或者HTML DOM來操作它。

        下面我們就使用DOM來建立一個表格：

<span style="font-size:18px;">window.onload=function(){var table=document.createElement('table');table.border=1;table.width=300;var caption=document.createElement('caption');table.appendChild(caption);caption.appendChild(document.createTextNode('人員表'));var thead=document.createElement('thead');table.appendChild(thead);var tr=document.createElement('tr');thead.appendChild(tr);var th1=document.createElement('th');var th2=document.createElement('th');var th3=document.createElement('th');tr.appendChild(th1);th1.appendChild(document.createTextNode('姓名'));tr.appendChild(th2);th2.appendChild(document.createTextNode('年齡'));tr.appendChild(th3);th3.appendChild(document.createTextNode('性別'));document.body.appendChild(table);};</span>

        運行一下代碼，效果如下

        

        二 操作樣式

        CSS作為HTML的輔助，可以增強頁面的顯示效果。但不是每個瀏覽器都能支援最新的CSS能力。CSS的能力和DOM層級密切相關，所以我們有必要檢測當前瀏覽器支援的CSS能力等級。

        DOM1級實現了最基本的文檔處理，DOM2和DOM3在這個基礎上增加了更多的互動能力，這裡我們主要討論CSS，DOM2增加了CSS編程訪問方式和改變CSS樣式資訊。

        1訪問元素的樣式

        任何HTML元素標籤都會有一個通用的屬性style。它會返回CSSStyleDeclaration對象。下面我們看幾個最常見的行內style樣式的訪問方式。

        雖然可以通過style來擷取單一值的CSS樣式，但是對於複合值的樣式資訊，就需要通過計算樣式來擷取。DOM2級樣式，window對象下提供了getComputedStyle()方法。接受兩個參數，需要計算的樣式元素，第二個偽類（：hover），如果沒有偽類，就填null。

        2操作樣式表

        使用style屬性可以設定行內的CSS樣式，而通過id和class調用時最常用的方法。之前我們使用style屬性，僅僅只能擷取和設定行內的樣式，如果是通過內聯<style>或連結<link>提供的樣式規則就無可奈何了，後來我們接觸到了getComputedStyle和currentStyle，這隻能擷取卻無法設定。

        CSSStyleSheet類型表示通過<link>元素和<style>元素包含的樣式表。

        這兩個元素本身返回的是HTMLLinkElement和HTMLStyleElement類型，但是CSSStyleSheet類型更加通用一些，得到這個類型非IE使用sheet屬性，IE使用styleSheet

var sheet=link.sheet||link.styleSheet;

        還有我們可以通過CSSRules屬性（非IE）和rules屬性（IE），獲得樣式表的規則集合列表。這樣我們就可以對每個樣式進行具體的操作了。

        Varrules=sheet.cssRules||sheet.rules;

        總結：三種操作CSS的方法，第一種style行內，可讀可寫；第二種行內、內聯和連結，使用getComputedStyle或者currentStyle，可讀不可寫；第三種CSSRules或rules，內聯和連結可讀可寫。