ppk談JavaScript style屬性

2024-05-06 14:17:01

字體：大中小

供稿：網(wǎng)友

事實(shí)上，7個(gè)范例腳本都用到了某種形式的CSS修改。比如，“表單驗(yàn)證”改變出錯(cuò)的表單域的樣式，“XMLHTTP速度測試計(jì)”使用動(dòng)畫（其實(shí)也就是在很短的時(shí)間內(nèi)多次改變某個(gè)樣式）來讓用戶注意到速度的數(shù)據(jù)（而且，老實(shí)講這算是有些花哨的效果）。“下拉菜單”通過改變樣式來顯示和隱藏菜單項(xiàng)。這些變化都擁有同樣的目的：把用戶的注意力吸引到這些元素上。

JavaScript有如下4種修改CSS的方式：

l 修改元素的style屬性（element.style.margin='10%'）；

l 改變元素的class或id（element.className='error'），瀏覽器將自動(dòng)應(yīng)用那些定義在新的class或id上的樣式；

l 向文檔中寫入新的CSS指令（document.write('<style>.accessibility{display: none}</style>'）；

l 改變整個(gè)頁面的樣式表。

大多數(shù)的CSS改變腳本，都采用修改style屬性或改變class或id的方式。document.write方法只適合用于某些特定的場合以增強(qiáng)頁面的可訪問性。最后，我們很少會(huì)改變整個(gè)樣式表，因?yàn)椴⒎撬械臑g覽器都支持這樣做，而且通常你也只是想改變某些特定元素的樣式。

不管怎么說，我在范例腳本中使用了所有4種方法。我們將在本章中逐個(gè)研究這些方法及它們適用的場合。

A　style屬性

最初也是最廣為人知的修改CSS的方式就是通過所有HTML元素都擁有的style屬性，并且訪問它們的內(nèi)聯(lián)樣式，style對象對每一個(gè)內(nèi)聯(lián)的CSS聲明都包含一個(gè)對應(yīng)的屬性。如果你想設(shè)置一個(gè)元素的CSS屬性margin，使用element.style.margin。如果你想要設(shè)置它的CSS屬性color，就使用element.style.color。JavaScript屬性總是擁有一個(gè)和CSS屬性相似的名字。

內(nèi)聯(lián)樣式

記住：HTML元素的style屬性讓我們得以訪問該元素的內(nèi)聯(lián)樣式。

讓我們來回顧一些CSS的理論。CSS提供4種方式來給元素定義樣式表。你可以使用內(nèi)聯(lián)樣式，即直接把你的CSS寫在HTML標(biāo)簽的style屬性中。

<p style="margin: 10%">Text</p>

此外，你可以嵌入、鏈入或引入樣式表。不管用何種方法，因?yàn)閮?nèi)聯(lián)樣式比其他任何形式的樣式更為明確，內(nèi)聯(lián)樣式能覆蓋那些嵌入、鏈入或引入頁面的樣式表中定義的樣式。因?yàn)閟tyle屬性可以訪問這些內(nèi)聯(lián)樣式，所以它總是能覆蓋其他的樣式。這是這種方法的巨大優(yōu)勢。

然而，當(dāng)你嘗試讀取樣式時(shí)，可能遭遇問題。看這個(gè)例子：

<p id="test">Text</p>

p#test {

margin: 10%;

}

alert(document.getElementById('test').style.margin);

測試段落并沒有包含任何內(nèi)聯(lián)樣式，margin: 10%是被定義在一個(gè)嵌入的（或者鏈入，或者引入的）樣式表中，而它是不可能從style屬性中讀出來的。彈出警告框顯示為空。

在下一個(gè)例子中，彈出警告框?qū)@示返回結(jié)果“10%”，因?yàn)閙argin現(xiàn)在被定義為內(nèi)聯(lián)樣式：

上一篇：javascript得到XML某節(jié)點(diǎn)的子節(jié)點(diǎn)個(gè)數(shù)的腳本

下一篇：Javascript調(diào)試腳本的經(jīng)驗(yàn)之談第1/2頁