DOM動作表格，dom表格

DOM動作表格，dom表格

CSS分類

       行內： 

<div id="box"  style="width:200px;border:1px solid red  color:red;font-size:16px;"></div>

       內聯：在HTML的頭部一般為如下格式

<styletype=”text/css”>         div.test{                         background-color:red;                         height:10px;                     width:10px; margin:10px;               }</style>

       連結:在HTML中引入一個單獨的CSS檔案，格式如下

<linkrel="stylesheet" type="text/css"href="xx.css"/>

首先整體的看一下JS對CSS的操作

JS可以對行內樣式進行擷取和設定

       在HTML中每個元素都有一個屬性對象style，該對象包含了該元素的所有的css樣式，這種CSS樣式稱為內嵌樣式，如下

<div id="box"  style="width:200px;border:1px solid red  color:red;font-size:16px;"></div>       var box = document.getElementById('box');//獲得id為box的元素節點       alert(box.style);                 //CSSStyleDeclaration對象       alert(box.style.color);              //red       alert(box.style.width);

注意：在CSS中如果出現類型font-size的屬性在JS中把-號去掉，後面的字元大寫，寫成alert(box.style.fontSize);

利用JS的style可以獲得所有設定過的屬性值。也可以設定屬性值。  

       box.style.color=green;//將顏色改為綠色       box.style.height=12px;//也可以設定沒有的屬性

DOM2級還為style定義了一些屬性和方法    

       removeProperty(name)——移除指定的屬性       setProperty(name,value,position)——給指定的屬性設定值

但是通過style只能夠獲得行內的css樣式，如果使用內聯或連結的則無法獲得，在非IE中可以使用getComputedStyle()在IE中使用currentStyle()屬性，這兩個方法只能夠獲得。

JS對內聯及連結樣式進行擷取和設定

       對這兩種樣式的操作時是通過CSSStyleSheet對象進行.對該對象的擷取有兩種方式

方法一：先獲得元素，然後獲得該對象

在IE中通過sheet屬性獲得，在非IE中通過styleSheet獲得。

var link = document.getElementsByTagName('link')[0];//通過標籤面獲得所有的連結的css樣式然後去第一個var sheet = link.sheet || link.styleSheet;//通過sheet或styleSheet獲CSSStyleSheet對象

方法二

通過doucument中的styleSheets直接獲得，返回的是個數值，它相容所有的瀏覽器。

       var sheet=document.styleSheets[0];

       CSSStyleSheet有一些屬性和方法可以操作外聯的樣式，常用的“增”和“刪”，但是IE和非IE是不相容的，所以需要自己寫函數進行相容。如果要“改”CSS中的樣式則可以使用CSSRules，對CSS檔案中的某一條規則進行修改。

小結

       CSS一共三種樣式，DOM操作可以分為兩個大類，行內的使用style可讀可寫，內聯和連結的使用getComputedStyle或currentStyle只能讀，如果使用CSSStyleSheet對象下的CSSRules對象則可以對指定的CSS規則進行讀和寫。