JavaScript存取CSS屬性的幾種方式介紹_javascript技巧
- WBOY原創
- 2016-05-16 16:41:291462瀏覽
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程式碼會存在於標籤之間或之中，一個或就是一個樣式區塊。在程式碼中可能從上到下依序排列著多個程式碼區塊，我們可以像存取陣列元素一樣存取樣式區塊。例如我們要存取樣式區塊中的第一個，就可以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支援。