Javascript 如何訪問 和 修改CSS樣式(網頁樣式)
阿新 • • 發佈：2018-12-26
如果想修改某個元素的CSS樣式，建議看一下我寫的另一篇文章：
注意：我說的是修改，而不是訪問。如果是修改的話可以看看上面《補充說明》這篇文章，但如果是訪問的話，就看本文中的這兩種方法，同樣，如果是訪問兼顧修改的話，也只看本文中的兩種方法（這是我瞭解到的兩種方法，如果有其他的方法，請賜教，謝謝）
Javascript 訪問修改頁面元素的CSS樣式，一般有兩種方法
一種方法是訪問修改元素中style屬性的CSS樣式，一般這樣的style屬性是直接寫在元素上的，而不是在外部的CSS檔案中；另一種方法是訪問外部的CSS檔案，然後修改CSS樣式，下面對這兩種方法進行介紹。
1. 訪問並修改元素中style屬性的CSS樣式
看下面的例子：
原始碼如下：
<html> <head> <script language="javascript"> //js如何訪問元素的style屬性，進行樣式修改 function test4(eventObj){ //怎麼知道是 黑色 按鈕按下還是 紅色按鈕按下 if(eventObj.value=="黑色"){ //根據ID號獲取對應的元素，可以訪問元素中的style物件， //也可以通過訪問元素中的style物件，再訪問物件中的其他屬性 //也可以對這些屬性進行修改，直接為其賦值即可，如下： var div1=document.getElementById('div1'); window.alert(div1.style.width);//訪問物件的width屬性 div1.style.width="450px"; //原來的width值為400px，改為450px //將背景顏色改為black div1.style.backgroundColor="black"; //這裡修改顏色，不能寫background-color，而是backgroundColor } else if(eventObj.value=="紅色"){ var div1=document.getElementById("div1"); //window.alert(div1.style.width); div1.style.backgroundColor="red"; } } </script> </head> <body > <!-- 如何通過修改style來改變style --> <div id="div1" style="width:400px;height:300px;background-color:red" >div1</div> <input type="button" value="黑色" onclick="test4(this)"/><!-- 這裡的this就是當前button物件 --> <input type="button" value="紅色" onclick="test4(this)"/> </body> </html>
2. 訪問並修改外部定義的CSS樣式（類定義的CSS樣式）
js訪問外部定義的CSS樣式（類定義的CSS樣式），不能使用上面的通過修改style屬性來改變style屬性的方法去訪問，因為CSS資料不是儲存在style屬性中，它是儲存在類中的。 那麼訪問外部定義的CSS樣式檔案的方法是：先取得定義類的樣式表的引用，用document.styleSheets集合實現這個目的，這個集合包含HTML頁面中所有的樣式表，DOM為每個樣式表定義一個cssRules的集合，在這個集合中包含了定義在樣式表中的所用的CSS規則。 （注意：Mozilla和Safasi中是cssRules，而IE中式rules）。看下面的例子：
兩個css檔案，如下
html檔案，如下：
原始碼如下：
mycss.css
.style1{
width:500px;
height:200px;
background-color:pink;
}
.style2{
width:600px;
height:100px;
background-color:yellow;
}mycss2.css
.style3{
width:300px;
height:300px;
background-color:green;
}
.style4{
width:400px;
height:400px;
background-color:blue;
}html程式碼：
<html>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<link rel="stylesheet" type="text/css" href="mycss2.css" />
<head>
<script language="javascript">
function test4(eventObj){
//獲取mycss.css 中所有的class選擇器
//styleSheets[0];這裡的0表示當前檔案中引用的第一個css檔案
//如果是獲取mycss2.css中所有的class選擇器，則應寫成styleSheets[1]
var ocssRules = document.styleSheets[0].rules||document.styleSheets[0].cssRules; //獲取mycss的所有樣式
var ocssRules1 = document.styleSheets[1].rules||document.styleSheets[1].cssRules; //獲取mycss2的所有樣式
//從ocssRules中取出你希望的class
var style1=ocssRules[0];
var style2=ocssRules[1]; //mycss.css檔案中的 兩個樣式
var style3=ocssRules1[0];
var style4=ocssRules1[1]; //mycss2.css檔案中的 兩個樣式
window.alert(style1.style.backgroundColor);
window.alert(style2.style.backgroundColor);
window.alert(style3.style.backgroundColor);
window.alert(style4.style.backgroundColor); //訪問獲取的四個樣式的背景色
//修改 style1 的背景色
if(eventObj.value=="黑色"){
style1.style.backgroundColor="black";
} else if(eventObj.value=="紅色"){
style1.style.backgroundColor="red";
}
}
</script>
</head>
<body >
<!-- 定義一個class選擇器 -->
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/><!-- 這裡的this就是當前button物件 -->
<input type="button" value="紅色" onclick="test4(this)"/>
</body>
</html> 以上就是Javascript 訪問修改頁面元素的CSS樣式的兩種方法