以下先記錄一下JS控制CSS所使用的方法.?


1.使用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對象：?

關于rules和cssRules的瀏覽器兼容性，本人博文有測試記錄：http://blog.csdn.net/u011043843/article/details/28276757

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結合的方式必須為<LINK rel="stylesheet" type="text/css" href="" /> 或<style></style>的時候以上方法可行,如@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屬性?

僅僅有寫原生的javascript了。?

1.用JS改動標簽的 class 屬性值：?

class 屬性是在標簽上引用樣式表的方法之中的一個，它的值是一個樣式表的選擇符，假設改變了 class 屬性的值，標簽所引用的樣式表也就更換了，所以這屬于第一種改動方法。

更改一個標簽的 class 屬性的代碼是：

document.getElementById( id ).className = 字符串;?
document.getElementById( id ) 用于獲取標簽相應的 DOM 對象，你也能夠用其他方法獲取。className 是 DOM 對象的一個屬性，它相應于標簽的 class 屬性。字符串 是 class 屬性的新值，它應該是一個已定義的CSS選擇符。?

利用這樣的辦法能夠把標簽的CSS樣式表替換成另外一個，也能夠讓一個沒有應用CSS樣式的標簽應用指定的樣式。

舉例：

<style type="text/css"> .txt { font-size: 30px; font-weight: bold; color: red; } </style> <div id="tt">歡迎光臨！</div> <p><button οnclick="setClass()">更改樣式</button></p> <script type="text/javascript"> function setClass() { document.getElementById( "tt" ).className = "txt"; } </script>
2.用JS改動標簽的 style 屬性值：?
style 屬性也是在標簽上引用樣式表的方法之中的一個，它的值是一個CSS樣式表。DOM 對象也有 style 屬性，只是這個屬性本身也是一個對象，Style 對象的屬性和 CSS 屬性是一一相應的，當改變了 Style 對象的屬性時，相應標簽的 CSS 屬性值也就改變了，所以這屬于另外一種改動方法。?


更改一個標簽的 CSS 屬性的代碼是：
<div id="t2">歡迎光臨！</div> <p><button οnclick="setSize()">大小</button> <button οnclick="setColor()">顏色</button> <button οnclick="setbgColor()">背景</button> <button οnclick="setBd()">邊框</button> </p> <script type="text/javascript"> function setSize() { document.getElementById( "t2" ).style.fontSize = "30px"; } function setColor() { document.getElementById( "t2" ).style.color = "red"; } function setbgColor() { document.getElementById( "t2" ).style.backgroundColor = "blue"; } function setBd() { document.getElementById( "t2" ).style.border = "3px solid #FA8072"; } </script>

document.getElementById( id ).style.屬性名 = 值;?
document.getElementById( id ) 用于獲取標簽相應的 DOM 對象，你也能夠用其他方法獲取。style 是 DOM 對象的一個屬性，它本身也是一個對象。屬性名 是 Style 對象的屬性名，它和某個CSS屬性是相相應的。?

說明：這樣的方法改動的單一的一個CSS屬性，它不影響標簽上其他CSS屬性值。?


舉例：

總結

以上是生活随笔為你收集整理的javascript操作html元素CSS属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。