首頁 > web前端 > js教程 > 主體

javascript控制css樣式所有樣式程式碼實例匯總

伊谢尔伦
發布: 2017-07-19 16:43:04
原創
1648 人瀏覽過

記錄JS控制CSS所使用的方法. 

使用javascript更改某個css class的屬性...

<style type="text/css"> 
.orig { 
display: none; 
} 
</style>
登入後複製

你想要改變把他的display屬性由none改為inline。
解決方法: 在IE裡:

document.styleSheets[0].rules[0].style.display = "inline";
登入後複製

在firefox裡:

document.styleSheets[0].cssRules[0].style.display = "inline";
登入後複製

討論: 可以做一個函數來搜尋特定名字的style物件:

function getstyle(sname) { 
for (var i=0;i<document.styleSheets.length;i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} else { 
rules = document.styleSheets[i].rules; 
} 
for (var j=0;j<rules.length;j++) { 
if (rules[j].selectorText == sname) { 
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
return rules[j].style; 
} 
} 
} 
}
登入後複製

然後只要:

getstyle(".orig").display = "inline";
登入後複製

就可以了。
------------------ 注意document.styleSheets[0].rules[0].style 這個styleSheets[0]陣列的下標是代表本頁的第N個CSS樣式表,它的下級rules[0]的數組下標表示的則是這個樣式表中的第N個樣式,例如:

<style type="text/css"> 
.s{display="none";} 
.w{display="none";} 
</style>
登入後複製

修改S則: document.styleSheets [0].rules[0].style.display='inline';
修改W則:document.styleSheets[0].rules[1].style.display = 'inline';
注意:CSS且HTML結合的方式必須為的時候以上方法可行,如@IMPORT 則不行. 


下面記錄JS訪問CSS中的樣式:
用javascript獲取和設定style
DOM標準引入了覆蓋樣式表的概念,當我們用document.getElementById(" id").style.backgroundColor 取得樣式時取得的只是id中style屬性中設定的背景色,如果id中的style屬性中沒有設定background-color那麼就會回傳空,也就是說如果id用class屬性引用了一個外部樣式表,在這個外部樣式表中設置的背景色,那麼不好意思document.getElementById("id").style.backgroundColor 這種寫法不好使,如果要獲取外部樣式表中的設置,需要用到window物件的getComputedStyle()方法,程式碼這樣寫

window.getComputedStyle(id,null).backgroundColor
登入後複製

但是相容問題又來了,這麼寫在firefox中好使,但在IE中不好使
兩者相容的方式寫成

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
登入後複製

如果是取得背景色,這種方法在firefox和IE中的返回值還是不一樣的,IE中是返回"#ffff99"樣子的,而firefox中返回"rgb (238, 44, 34) "
值得注意的是:window.getComputedStyle(id,null)這種方式不能設定樣式,只能取得,要設定還得寫成類似這樣id.style.background="# EE2C21";
在IE中CURRENTSTYLE只能以唯讀方式取得樣式.




以上是javascript控制css樣式所有樣式程式碼實例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!