在web開發中，很多時候我們需要用JavaScript對和網頁的樣式進行修改，接下來，我們就來看一下我們該如何訪問css屬性，針對不同情況及案例來進行分析。
情況一：css屬性位於html標簽內
在實際開發過程中，如果樣式表的內容比較少的話，我們通常將css屬性封裝在html標簽中，這時JavaScript訪問css屬性很直接，通過訪問html標簽的style屬性，修改具體的樣式即可完成相應的操作。
例如：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>styleTest</title>
</head>
<body>
<div style="width: 200px;height: 200px; background: green;" id="mydiv"></div>
<input type="button" value="test" onclick="test()">
<script type=text/javascript>
function test(){
var mydiv=document.getElementById('mydiv');
mydiv.style.background="red"; // id.style.屬性 執行相應的操作
}
</script>
</body>
</html>
上述案例通過點擊按鈕，改變對應div的背景顏色。
情況二：css屬性在其他文件中
當css樣式表不在html文件中，我們通常會在頭部引入css文件名，此時。此時如果我們使用情況一的方法訪問，則會發現失敗。原因就是此時相應的標簽沒有style這個屬性了，如果我們查看對應標簽的style時，會發現是undefined。所以我們需要使用新的方法來訪問其屬性，網上的方法有很多，在這裡我給出我所使用的方法。並給出相應的解釋，希望能幫助到大家。
首先取得定義類的樣式表的引用，用document.styleSheet集合實現這個目的，這個集合包含HTML頁面中所以的樣式表，DOM為每個樣式表定義一個CSSRules的集合，這個集合中包含定義在樣式表中的所用css規則 (注意:Mozilla和Safari中是cssRules，IE中是rules)。
具體如下：
第①步：
訪問獲取css文件 ( [0] 表示獲取的引入的第一個css文件)
var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules； // 兼容不同浏覽器
第②步：
獲取指定的css屬性 ( [0] 表示css文件中的第一個標簽的css樣式 )
var style1=icssrules[0];
第③步：
執行相應操作
style1.style.background="red";
詳細代碼如下：
html文件：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>styleTest</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="mydiv"></div>
<input type="button" value="test" onclick="test()">
<script type=text/javascript>
function test(){
var mydiv=document.getElementById('mydiv');
var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
var style1=icssrules[0];
style1.style.backgroundColor="red";
}
</script>
</body>
</html>
外部css文件：
#mydiv {
width: 200px;
height: 200px;
background: green;
}
實際效果截圖如下：
點擊前：
點擊後：
通過兩種方式，可以修改相應的css樣式表。針對不同的情況可以借鑒不同的方法。
- 上一頁:JS的內建函數reduce
- 下一頁:關於閉包