要通過元素訪問樣式表，那么就應該先確定是哪個元素。直接訪問樣式表在該樣式塊里找相應的樣式規則，最后在該樣式規則里找相應的樣式。
JavaScript訪問CSS屬性的方式總體說來有兩種：“通過元素訪問”、“直接訪問樣式表”。另外訪問樣式的時候有一個不可忽略的問題——運行時樣式。
1.通過元素訪問
既然是要通過元素訪問樣式表，那么就應該先確定是哪個元素。這是DOM的內容，在此先不多說。獲取引用之后就可以通過 “引用.style.要訪問的屬性” ，來訪問某個屬性。舉個例子，看如下代碼。
<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
當我們想要獲取#a的背景色的時候就可以 document.getElementById("a").style.backgroundColor;這樣就完成了訪問，之后是要返回還是更改屬性值那就隨你便了。
2.直接訪問樣式表
直接訪問樣式表總的來說就是“先找到相應的樣式塊，然后在該樣式塊里找相應的樣式規則，最后在該樣式規則里找相應的樣式”。
先說什么是樣式塊。在代碼中，CSS代碼會存在于<style></style>標簽之間或<link>之中，一個<style></style>或<link>就是一個樣式塊。在代碼中可能從上到下依次排列著多個代碼塊，我們可以像訪問數組元素一樣訪問樣式塊。例如我們要訪問樣式塊中的第一個，就可以document.styleSheets[0]
然后說什么是樣式規則。先看如下代碼
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
background-color:red;
}
#b{
height:100px;
width:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
代碼中分別規定了#a和#b的樣式，#a的樣式的集合或#b的集合就是一個樣式規則。在這個樣式塊中，對#a的是第一個樣式規則，對#b的是第二個樣式規則。我們同樣可以像訪問數組元素一樣訪問樣式規則。例如我們要訪問#b樣式規則，就可以document.styleSheets[0].cssRules[1] 當然你可以選擇這么寫document.styleSheet[0].rules[1]但這種寫法不被Firefox支持。
然后我們就可以訪問相應的樣式了。例如我們要把#b的背景色改成綠色，就可以document.styleSheets[0].cssRules[1].style.backgroundColor="green";
3.運行時樣式
看如下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
color:red;
}
#b{
height:100px;
width:100px;
}
</style>
</head>
<body>
<div id="a">
<div id="b">觀察字體顏色</div>
</div>
</body>
</html>
當我們運行alert(document.getElementById("b").style.color);的時候發現彈窗上什么都沒輸出，但頁面的字體顏色明明是紅色，為啥呢？這是因為每個元素的style對象屬性并不是即時更新的。當我們要彈窗上輸出紅色的時候就要用運行時樣式。window.getComputedStyle(document.getElementById("b"),null).color這樣就可以訪問到“紅色”。訪問運行時樣式也有另外一種寫法document.getElementById("b").currentStyle.color 但這種寫法只有IE支持。
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
