JavaScript訪問樣式表代碼

來源:互聯網
上載者:User

比如:當我們將滑鼠移動到一個表徵圖上的時候,表徵圖會出現一些動畫效果(漸層放大、閃動、更換顏色等),而這一切的友好效果基本上都跟樣式(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";

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.