javascript操作html元素CSS屬性

下面先記錄一下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對象： 

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個樣式,例如: 

.s{display="none";} 

.w{display="none";} 

修改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樣式的标簽應用指定的樣式。 

舉例： 

複制代碼 代碼如下:

.txt { 

font-size: 30px; font-weight: bold; color: red; 

<div id="tt">歡迎光臨！</div> 

<p><button onclick="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 屬性的代碼是： 

document.getElementById( id ).style.屬性名 = 值; 

document.getElementById( id ) 用于擷取标簽對應的 DOM 對象，你也可以用其它方法擷取。style 是 DOM 對象的一個屬性，它本身也是一個對象。屬性名 是 Style 對象的屬性名，它和某個CSS屬性是相對應的。 

說明：這種方法修改的單一的一個CSS屬性，它不影響标簽上其它CSS屬性值。 

div id="t2">歡迎光臨！</div> 

<p><button onclick="setSize()">大小</button> 

<button onclick="setColor()">顔色</button> 

<button onclick="setbgColor()">背景</button> 

<button onclick="setBd()">邊框</button> 

</p> 

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";