比如:當我們將滑鼠移動到一個表徵圖上的時候,表徵圖會出現一些動畫效果(漸層放大、閃動、更換顏色等),而這一切的友好效果基本上都跟樣式(style)有關,所以這一篇,我學習JavaScript對style的操作。
技術關鍵點:style。這一篇要求我們對CSS樣式有一定的瞭解。(讀者可以google一下CSS的相關內容)
操作步驟:
1、頁面代碼(包括JS代碼)如下:
複製代碼 代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Style Example</title>
<style type="text/css">
div.special
{
background-color:Red;
height:50px;
width:50px;
}
</style>
<script type="text/javascript">
function getBackGroundColor() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1" class="special"></div>
<input type="button" value="Get BackGround Color" onclick="getBackGroundColor();"/>
</body>
</html>
JS代碼中獲得了div對象,並輸出了div對象的背景顏色,一切看起來都那麼完美,可是效果總是讓我們失望,如下:
這樣看來,JavaScript以這種方式去訪問CSS樣式無法達到效果,原因:CSS資料並非儲存在style屬性中,而是儲存在類中。所以接下來要做的:就是怎麼樣去訪問CSS類?
2、幸運的是,我們找到了document.styleSheets集合。document.styleSheets包含了html頁面中所有樣式表的引用和所有的<style>元素。
因為瀏覽器的不同,訪問樣式表中單獨的規則(規則:指定是CSS類,例如上面html代碼中的div.special)的方法是不同的。DOM為每一個樣式表指定一個cssRules的集合,但是IE卻把這個集合命名為rules。所以在擷取樣式集合之前,代碼需要做一個技巧性的改動:
複製代碼 代碼如下:oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
每個規則都包含selectorText特性,div.special就是上面html中CSS規則的selectorText的值。規則還包含style屬性,這個時候就可以通過style屬性擷取背景顏色了。來看代碼吧:
複製代碼 代碼如下:function getBackGroundColor() {
var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
alert(oCSSRules[0].style.backgroundColor);
}
代碼效果:
3、這個時候,你可用通過修改樣式來改變背景顏色,但是最好不要這樣做,因為你改掉的是CSS類,其他引用了改CSS類的元素也會改變背景顏色,所以如果需要修改樣式,做好直接修改單個元素的style屬性,比如:document.getElementById("div1").style.backgroundColor="Blue";