|
|
1.使用Javascript更改某個(gè)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";
討論： 可以做一個(gè)函數(shù)來搜索特定名字的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 屬性的作用是對一個(gè)選擇的地址進(jìn)行替換.意思應(yīng)該是獲取RULES[J]的CLASSNAME.有說錯(cuò)的地方歡迎指正
return rules[j].style;
}
}
}
}
然后只要：
getstyle(".orig").display = "inline";
就可以了。
------------------ 注意 document.styleSheets[0].rules[0].style 這個(gè) styleSheets[0]數(shù)組的下標(biāo)是代表本頁的第N個(gè)CSS樣式表,它的下級rules[0]的數(shù)組下標(biāo)表示的則是這個(gè)樣式表中的第N個(gè)樣式,例如:
<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結(jié)合的方式必須為<LINK rel="stylesheet" type="text/css" href="" /> 或<style></style>的時(shí)候以上方法可行,如@IMPORT 則不行.
====================================
下面記錄一下JS訪問CSS中的樣式:
用Javascript獲取和設(shè)置style
DOM標(biāo)準(zhǔn)引入了覆蓋樣式表的概念，當(dāng)我們用document.getElementById("id").style.backgroundColor 獲取樣式時(shí) 獲取的只是id中style屬性中設(shè)置的背景色，如果id中的style屬性中沒有設(shè)置background-color那么就會返回空，也就是說如果id用class屬性引用了一個(gè)外部樣式表，在這個(gè)外部樣式表中設(shè)置的背景色，那么不好意思document.getElementById("id").style.backgroundColor 這種寫法不好使，如果要獲取外部樣式表中的設(shè)置，需要用到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)這種方式不能設(shè)置樣式，只能獲取，要設(shè)置還得寫成類似這樣id.style.background="#EE2C21";
在IE中CURRENTSTYLE只能以只讀方式獲取樣式.
本文只為學(xué)習(xí),摘錄了網(wǎng)絡(luò)搜索資料結(jié)合而成,無任何版權(quán),可以任意轉(zhuǎn)載,如原作者有不同想法,可隨時(shí)聯(lián)系我.
用JavaScript修改CSS屬性
只有寫原生的Javascript了。
1.用JS修改標(biāo)簽的 class 屬性值：
class 屬性是在標(biāo)簽上引用樣式表的方法之一，它的值是一個(gè)樣式表的選擇符，如果改變了 class 屬性的值，標(biāo)簽所引用的樣式表也就更換了，所以這屬于第一種修改方法。
更改一個(gè)標(biāo)簽的 class 屬性的代碼是：
document.getElementById( id ).className = 字符串;
document.getElementById( id ) 用于獲取標(biāo)簽對應(yīng)的 DOM 對象，你也可以用其它方法獲取。className 是 DOM 對象的一個(gè)屬性，它對應(yīng)于標(biāo)簽的 class 屬性。字符串 是 class 屬性的新值，它應(yīng)該是一個(gè)已定義的CSS選擇符。
利用這種辦法可以把標(biāo)簽的CSS樣式表替換成另外一個(gè)，也可以讓一個(gè)沒有應(yīng)用CSS樣式的標(biāo)簽應(yīng)用指定的樣式。
舉例：
復(fù)制代碼 代碼如下:
<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">歡迎光臨！</div>
<p><button onclick="setClass()">更改樣式</button></p>
<script type="text/Javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>
2.用JS修改標(biāo)簽的 style 屬性值：
style 屬性也是在標(biāo)簽上引用樣式表的方法之一，它的值是一個(gè)CSS樣式表。DOM 對象也有 style 屬性，不過這個(gè)屬性本身也是一個(gè)對象，Style 對象的屬性和 CSS 屬性是一一對應(yīng)的，當(dāng)改變了 Style 對象的屬性時(shí)，對應(yīng)標(biāo)簽的 CSS 屬性值也就改變了，所以這屬于第二種修改方法。
更改一個(gè)標(biāo)簽的 CSS 屬性的代碼是：
document.getElementById( id ).style.屬性名 = 值;
document.getElementById( id ) 用于獲取標(biāo)簽對應(yīng)的 DOM 對象，你也可以用其它方法獲取。style 是 DOM 對象的一個(gè)屬性，它本身也是一個(gè)對象。屬性名 是 Style 對象的屬性名，它和某個(gè)CSS屬性是相對應(yīng)的。
說明：這種方法修改的單一的一個(gè)CSS屬性，它不影響標(biāo)簽上其它CSS屬性值。
舉例：
復(fù)制代碼 代碼如下:
div id="t2">歡迎光臨！</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">顏色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="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>
JavaScript技術(shù)：JS 控制CSS樣式表，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
