|
|
Javascript可以訪問(wèn)網(wǎng)頁(yè)中元素的style屬性,例如:
<div id="main" style="background-color:red"></div>
通過(guò)js訪問(wèn)style屬性
alert(document.getElementById("main").style.backgroundColor);
通過(guò)js改變style屬性
document.getElementById("main").style.backgroundColor="blue";
以上代碼是我們所熟悉的,但通常我們用樣式表來(lái)控制元素的外觀屬性,例如:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
此時(shí)如果我們?cè)偈褂?alert(document.getElementById("main").style.backgroundColor);
則只能獲得一個(gè)空值,所以只能通過(guò)js去訪問(wèn)樣式表了.
document.styleSheets可以獲得樣式表的集合,因?yàn)闉g覽器之間有很大不同,訪問(wèn)樣式表的單獨(dú)規(guī)則也不同.DOM為每一個(gè)樣式表指定一個(gè)cssRules集合,Mozilla和Safari正確實(shí)現(xiàn)了這個(gè)標(biāo)準(zhǔn),不過(guò)可惜IE中定義這個(gè)集合為rules,因此可以使用以下代碼來(lái)獲得正確的對(duì)象:
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
這樣就可以獲得不同瀏覽器的CSS集合了.
通過(guò)以下JS代碼來(lái)獲得樣式表中的樣式:
復(fù)制代碼 代碼如下:
function GetCSS()
{
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
alert(oCssRules[0].style.backgroundColor);
}
styleSheets[0]表示第一個(gè)樣式表引用,oCssRules[0]表示第一個(gè)樣式規(guī)則(即#main{}的內(nèi)容),通過(guò)style屬性來(lái)訪問(wèn)具體的規(guī)則.
同理,更改該樣式表規(guī)則代碼如下:
復(fù)制代碼 代碼如下:
function SetCSS()
{
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
oCssRules[0].style.backgroundColor="red";
oCssRules[0].style.marginLeft="20px";
oCssRules[0].style.marginTop="20px";
}
但是需要注意的是,因?yàn)楹芏嘣赜锌赡荜P(guān)聯(lián)同一個(gè)樣式表,所以改變時(shí)需要慎重.
除了元素的style對(duì)象和css規(guī)則外,每個(gè)元素還有一個(gè)最終樣式,最終樣式用來(lái)告訴我們?cè)刈詈笫侨绾物@示在屏幕上的,也就是style和css重合計(jì)算后的樣式.IE和DOM有兩種方式來(lái)訪問(wèn)此樣式,IE中通過(guò)currentStyle屬性,DOM中使用getComputedStyle()方法.
JS獲得最終樣式的方法如下:
復(fù)制代碼 代碼如下:
function GetFinalCSS()
{
var oDiv=document.getElementById("main");
//訪問(wèn)style屬性
alert(oDiv.style.backgroundColor);
//IE方法
alert(oDiv.currentStyle.backgroundColor);
//DOM方法，第二個(gè)參數(shù)為偽元素，如:hover,first-leeter之類(lèi)
//alert(document.defaultView.getComputeStyle(oDiv,null).backgroundColor);
}
我經(jīng)常使用currentStyle來(lái)獲得樣式,省去了訪問(wèn)樣式表的麻煩
需要注意的是currentStyle是只讀屬性,不能夠?qū)ζ滟x值,因?yàn)槠涫嵌喾N樣式綜合計(jì)算后的樣式規(guī)則,這點(diǎn)并不難理解.
對(duì)于getComputedStyle方法,可以通過(guò)document.defaultView來(lái)調(diào)用(IE和Safari不支持此方法).所以,當(dāng)使用getComputedStyle方法時(shí),最好在多個(gè)瀏覽器上進(jìn)行測(cè)試.
JavaScript技術(shù)：Javascript 訪問(wèn)樣式表實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
