頁(yè)面中用了style特性的元素css樣式，并沒(méi)有通過(guò)直接寫(xiě)在對(duì)象里面的style定義，這樣的css怎么通過(guò)javascript的dom訪問(wèn)呢。也就是說(shuō)怎么通過(guò)javascript dom來(lái)訪問(wèn)css類(lèi)中的屬性。
首先，獲得定義樣式表css的引用。使用的是document.stylesheets集合實(shí)現(xiàn)的。dom指定樣式表對(duì)象有以下特性
1.disabled-表示樣式表是否被禁用
2.href-用于外部引用文件樣式表的url，對(duì)于style元素的話(huà)，該值應(yīng)該是null,不過(guò)在mozilla返回的是當(dāng)前頁(yè)面的url值
3.media-可以使用該樣式表的媒體類(lèi)型,由html的media特性指定,ie在實(shí)現(xiàn)這個(gè)屬性上有錯(cuò)誤，返回的是與media特性包含相同內(nèi)容的字符串。、
4.ownernode-指定樣式的dom節(jié)點(diǎn)。ie不支持該屬性
5.parentstylesheet-如果樣式表是通過(guò)css的@import語(yǔ)句來(lái)加載的，哪么這個(gè)特性將指出，出現(xiàn)@import語(yǔ)句的樣式表。
6.title-通過(guò)html title特性非配給樣式表的標(biāo)題，可以用在<link/><style/>上。
7.type-樣式的mime類(lèi)型，對(duì)于css通常是text/css.
應(yīng)為瀏覽器不同,訪問(wèn)樣式表中單獨(dú)的規(guī)則也是有技巧的.dom為每一個(gè)樣式表指定了一個(gè)cssrules的集合,它包含所有的定義在樣式表中的css的規(guī)則。火狐mozilla和蘋(píng)果的safari正確的實(shí)現(xiàn)了該標(biāo)準(zhǔn),不過(guò)ie是通過(guò)rules.因此要檢查一下，該使用那個(gè)。
舉例:
var obj_css = document.stylesheets[0].cssrules ||document.stylesheets[0].rules;
頁(yè)面舉例:
<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>
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：