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); //redalert(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規則進行讀和寫。

?

版權聲明：本文博主原創文章，博客，未經同意不得轉載。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的DOM手术台的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。