頁面中用了style特性的元素css樣式,并沒有通過直接寫在對(duì)象里面的style定義,這樣的css怎么通過javascript的dom訪問呢。也就是說怎么通過javascript dom來訪問css類中的屬性。
首先,獲得定義樣式表css的引用。使用的是document.stylesheets集合實(shí)現(xiàn)的。dom指定樣式表對(duì)象有以下特性
1.disabled-表示樣式表是否被禁用
2.href-用于外部引用文件樣式表的url,對(duì)于style元素的話,該值應(yīng)該是null,不過在mozilla返回的是當(dāng)前頁面的url值
3.media-可以使用該樣式表的媒體類型,由html的media特性指定,ie在實(shí)現(xiàn)這個(gè)屬性上有錯(cuò)誤,返回的是與media特性包含相同內(nèi)容的字符串。、
4.ownernode-指定樣式的dom節(jié)點(diǎn)。ie不支持該屬性
5.parentstylesheet-如果樣式表是通過css的@import語句來加載的,哪么這個(gè)特性將指出,出現(xiàn)@import語句的樣式表。
6.title-通過html title特性非配給樣式表的標(biāo)題,可以用在<link/><style/>上。
7.type-樣式的mime類型,對(duì)于css通常是text/css.
應(yīng)為瀏覽器不同,訪問樣式表中單獨(dú)的規(guī)則也是有技巧的.dom為每一個(gè)樣式表指定了一個(gè)cssrules的集合,它包含所有的定義在樣式表中的css的規(guī)則?;鸷黰ozilla和蘋果的safari正確的實(shí)現(xiàn)了該標(biāo)準(zhǔn),不過ie是通過rules.因此要檢查一下,該使用那個(gè)。
舉例:
var obj_css = document.stylesheets[0].cssrules ||document.stylesheets[0].rules;
頁面舉例:
<html>
<head>
<title>網(wǎng)站制作學(xué)習(xí)網(wǎng)-http://www.forasp.cn</title>
<style type=text/css>
.foraspcn {background-color:red;height:28px;width:200px;margin:1px;}
</style>
<script language=javascript>
function show_bgcolor()
{
var obj_css = document.stylesheets[0].cssrules ||document.stylesheets[0].rules;//返回的是一個(gè)集合對(duì)象
alert(obj_css[0].style.backgroundcolor);//輸出red
}
</script>
</head>
<body>
<div class=foraspcn><a href=javascript:void(0); onclick=show_bgcolor();>點(diǎn)擊查看顏色屬性</a></div>
</body>
</html>