JavaScript訪問修改CSS樣式表

標籤：

JavaScript訪問修改樣式表,可以方便的動態修改頁面:

一、訪問元素中style屬性的CSS樣式

這個可以直接使用style對象方便的訪問，例如：

<div  id = "mdiv"  >....</div>

 

訪問CSS的方法是:

 <script type="text/javascript">

//獲得元素

var oDiv = document.getElementyId("mdiv");

//訪問元素的style對象,再訪問對象中的屬性,也可以修改屬性的值,直接為他賦值

alert(oDiv.style.backgroundColor);

</script>

 

二、訪問外部定義的CSS樣式（類定義的CSS樣式）

這個沒法使用上面的方法去訪問，因為CSS資料不是儲存在style屬性中，它是儲存在類中的。

存取方法：先取得定義類的樣式表的引用，用document.styleSheets集合實現這個目的，這個集合包含HTML頁面中所有的樣式表，DOM為每個樣式表定義一個cssRules的集合，這個集合中包含定義在樣式表中的所用CSS規則（注意：Mozilla和Safasi中是cssRules，而IE中式rules）。

例如：

<style>

/*第一條規則*/

div.ss{

background-color:red;

width:101px;

}

 

/*第二條規則*/

a.btn2{

background:url(imag/2-AccessCtl.jpg);

}

</style>

 

訪問CSS:

var ocssRules = document.styleSheets[0].cssRules||document.styleSheets[0].rules;

//訪問第一條規則

alert(ocssRules[0].style.backgroundColor);

//設定值

ocssRules[0].style.width = "992px";

 

//訪問第二條規則

alert(ocssRules[1].style.background);

//設定值

ocssRules[0].style.background = "url(imag/3-back.jpg);";

 

以上是我用到的時候一些簡單的應用,具體深入的使用可以參看《JavaScript進階程式設計》中DOM技術部分

 

來源： http://echoetang.iteye.com/blog/525916

JavaScript訪問修改CSS樣式表