javascript之dom訪問css樣式表類
來源:易賢網(wǎng) 閱讀:844 次 日期:2016-06-30 09:17:25
溫馨提示:易賢網(wǎng)小編為您整理了“javascript之dom訪問css樣式表類”,方便廣大網(wǎng)友查閱!

頁面中用了style特性的元素css樣式,并沒有通過直接寫在對象里面的style定義,這樣的css怎么通過javascript的dom訪問呢。也就是說怎么通過javascript dom來訪問css類中的屬性。

首先,獲得定義樣式表css的引用。使用的是document.stylesheets集合實現(xiàn)的。dom指定樣式表對象有以下特性

1.disabled-表示樣式表是否被禁用

2.href-用于外部引用文件樣式表的url,對于style元素的話,該值應該是null,不過在mozilla返回的是當前頁面的url值

3.media-可以使用該樣式表的媒體類型,由html的media特性指定,ie在實現(xiàn)這個屬性上有錯誤,返回的是與media特性包含相同內(nèi)容的字符串。、

4.ownernode-指定樣式的dom節(jié)點。ie不支持該屬性

5.parentstylesheet-如果樣式表是通過css的@import語句來加載的,哪么這個特性將指出,出現(xiàn)@import語句的樣式表。

6.title-通過html title特性非配給樣式表的標題,可以用在<link/><style/>上。

7.type-樣式的mime類型,對于css通常是text/css.

應為瀏覽器不同,訪問樣式表中單獨的規(guī)則也是有技巧的.dom為每一個樣式表指定了一個cssrules的集合,它包含所有的定義在樣式表中的css的規(guī)則。火狐mozilla和蘋果的safari正確的實現(xiàn)了該標準,不過ie是通過rules.因此要檢查一下,該使用那個。

舉例:

var obj_css = document.stylesheets[0].cssrules ||document.stylesheets[0].rules;

頁面舉例:

<html>

<head>

<title>網(wǎng)站制作學習網(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;//返回的是一個集合對象

alert(obj_css[0].style.backgroundcolor);//輸出red

}

</script>

</head>

<body>

<div class=foraspcn><a href=javascript:void(0); onclick=show_bgcolor();>點擊查看顏色屬性</a></div>

</body>

</html>

更多信息請查看腳本欄目
易賢網(wǎng)手機網(wǎng)站地址:javascript之dom訪問css樣式表類

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)