|
|
JavaScript有如下4種修改CSS的方式：
l 修改元素的style屬性（element.style.margin='10%'）；
l 改變?cè)氐腸lass或id（element.className='error'），瀏覽器將自動(dòng)應(yīng)用那些定義在新的class或id上的樣式；
l 向文檔中寫(xiě)入新的CSS指令（document.write('<style>.accessibility{display: none}</style>'）；
l 改變整個(gè)頁(yè)面的樣式表。
大多數(shù)的CSS改變腳本，都采用修改style屬性或改變class或id的方式。document.write方法只適合用于某些特定的場(chǎng)合以增強(qiáng)頁(yè)面的可訪問(wèn)性。最后，我們很少會(huì)改變整個(gè)樣式表，因?yàn)椴⒎撬械臑g覽器都支持這樣做，而且通常你也只是想改變某些特定元素的樣式。
不管怎么說(shuō)，我在范例腳本中使用了所有4種方法。我們將在本章中逐個(gè)研究這些方法及它們適用的場(chǎng)合。
A style屬性
最初也是最廣為人知的修改CSS的方式就是通過(guò)所有HTML元素都擁有的style屬性，并且訪問(wèn)它們的內(nèi)聯(lián)樣式，style對(duì)象對(duì)每一個(gè)內(nèi)聯(lián)的CSS聲明都包含一個(gè)對(duì)應(yīng)的屬性。如果你想設(shè)置一個(gè)元素的CSS屬性margin，使用element.style.margin。如果你想要設(shè)置它的CSS屬性color，就使用element.style.color。JavaScript屬性總是擁有一個(gè)和CSS屬性相似的名字。
內(nèi)聯(lián)樣式
記住：HTML元素的style屬性讓我們得以訪問(wèn)該元素的內(nèi)聯(lián)樣式。
讓我們來(lái)回顧一些CSS的理論。CSS提供4種方式來(lái)給元素定義樣式表。你可以使用內(nèi)聯(lián)樣式，即直接把你的CSS寫(xiě)在HTML標(biāo)簽的style屬性中。
<p style="margin: 10%">Text</p>
此外，你可以嵌入、鏈入或引入樣式表。不管用何種方法，因?yàn)閮?nèi)聯(lián)樣式比其他任何形式的樣式更為明確，內(nèi)聯(lián)樣式能覆蓋那些嵌入、鏈入或引入頁(yè)面的樣式表中定義的樣式。因?yàn)閟tyle屬性可以訪問(wèn)這些內(nèi)聯(lián)樣式，所以它總是能覆蓋其他的樣式。這是這種方法的巨大優(yōu)勢(shì)。
然而，當(dāng)你嘗試讀取樣式時(shí)，可能遭遇問(wèn)題。看這個(gè)例子：
<p id="test">Text</p>
p#test {
margin: 10%;
}
alert(document.getElementById('test').style.margin);
測(cè)試段落并沒(méi)有包含任何內(nèi)聯(lián)樣式，margin: 10%是被定義在一個(gè)嵌入的（或者鏈入，或者引入的）樣式表中，而它是不可能從style屬性中讀出來(lái)的。彈出警告框顯示為空。
在下一個(gè)例子中，彈出警告框?qū)@示返回結(jié)果“10%”，因?yàn)閙argin現(xiàn)在被定義為內(nèi)聯(lián)樣式：
<p style="margin: 10%" id="test">Text</p>
alert(document.getElementById('test').style.margin);
所以，style屬性最適合于設(shè)置樣式，而要獲取它們時(shí)就沒(méi)那么有用了。后面我們會(huì)討論從嵌入頁(yè)面的、鏈入的或者引入的樣式表中獲取樣式的方法。
破折號(hào)
許多CSS屬性的名字包含一個(gè)破折號(hào)，例如font-size。然而在JavaScript中，破折號(hào)表示相減（minus），因此它不能被用在屬性名中。這將給出一個(gè)錯(cuò)誤：
element.style.font-size = '120%';
這是要求瀏覽器從element.style.font里減去（未定義的）變量size嗎？如果是= '120%'代表什么意義呢？作為替代，瀏覽器期望一個(gè)駝峰格式（camelCase）的屬性名：
element.style.fontSize = '120%';
一般規(guī)則是從CSS屬性名中移除所有的破折號(hào)，并且破折號(hào)后的字符變?yōu)榇髮?xiě)。這樣，margin-left變成了marginLeft，text-decoration變成了textDecoration，而border-left -style變成了borderLeftStyle。
單位
在JavaScript很多數(shù)值類型的值需要一個(gè)單位，就像它們?cè)贑SS中聲明時(shí)那樣。fontSize=120表示什么？120像素、還是120磅或者120%？瀏覽器可不知道這些，所以它不會(huì)做任何反應(yīng)。為了闡明你的意圖，單位是必須的。
以setWidth()函數(shù)為例，它是實(shí)現(xiàn)“XMLHTTP測(cè)速計(jì)”的動(dòng)畫(huà)效果的核心程序之一：
[XMLHTTP測(cè)速計(jì)，第70～73行]
function setWidth(width) {
if (width < 0) width = 0;
document.getElementById('meter').style.width = width + 'px';
}
該函數(shù)接手一個(gè)值，它將改變meter的寬度為這個(gè)新值。在經(jīng)過(guò)一個(gè)安全檢查以確保該值大于0之后，設(shè)置元素的style.width為這個(gè)新的寬度值。最后加上'px'，因?yàn)椴贿@樣的話，瀏覽器可能不知道如何解釋該數(shù)值，結(jié)果什么都不做。
不要忘了'px'
忘記在width或height之后附加一個(gè)'px'單位是一個(gè)常見(jiàn)的CSS修改錯(cuò)誤。
在CSS的怪癖模式（quirks mode）里，加上'px'不是必須的，因?yàn)闉g覽器遵循舊的規(guī)則，把無(wú)單位的值視為像素值。本質(zhì)上這不是一個(gè)問(wèn)題，但很多Web開(kāi)發(fā)人員因此養(yǎng)成了改變寬度或高度值后遺忘加上單位的習(xí)慣，當(dāng)他們工作在CSS嚴(yán)格模式（strict mode）下時(shí)就遭遇到了問(wèn)題。
獲取樣式
警告 以下所述內(nèi)容有瀏覽器兼容性問(wèn)題。
正如我們所看到的，style屬性不能讀取設(shè)置在嵌入、鏈入或引入頁(yè)面的樣式表中的樣式。但是因?yàn)閃eb開(kāi)發(fā)人員有時(shí)候需要讀取這些樣式，微軟和W3C都提供了訪問(wèn)非內(nèi)聯(lián)樣式的方式。微軟的解決方案只能工作在Explorer下，而W3C標(biāo)準(zhǔn)可以工作在Mozilla和Opera下。
微軟的解決方案就是currentStyle屬性，它的工作方式像極了style屬性，除了兩件事情：
l 它可以訪問(wèn)所有樣式，不僅僅是內(nèi)聯(lián)樣式，所以它匯報(bào)的是實(shí)際應(yīng)用在元素上的樣式；
l 它是只讀的，你不能通過(guò)它設(shè)置樣式。
例如：
var x = document.getElementById('test');
alert(x.currentStyle.color);
現(xiàn)在彈出對(duì)話框顯示元素當(dāng)前的color樣式，而不管它是在什么地方被定義的。
W3C的解決方案是window.getComputedStyle()方法，它以相似但語(yǔ)法更為復(fù)雜的方式工作：
var x = document.getElementById('test');
alert(window.getComputedStyle(x,null).color);
getComputedStyle()總是返回一個(gè)像素值，盡管原來(lái)的樣式可能會(huì)是50em或11%。
同以前一樣，當(dāng)我們?cè)庥霾患嫒莸那樾螘r(shí)，需要一些代碼分支來(lái)滿足所有瀏覽器：
function getRealStyle(id,styleName) {
var element = document.getElementById(id);
var realStyle = null;
if (element.currentStyle)
realStyle = element.currentStyle[styleName];
else if (window.getComputedStyle)
realStyle = window.getComputedStyle(element,null)[styleName];
return realStyle;
}
你可以使用這個(gè)函數(shù)如下：
var textDecStyle = getRealStyle('test','textDecoration');
記住getComputedStyle()將總是返回一個(gè)像素值，而currentStyle保留原來(lái)定義在CSS中的單位。
簡(jiǎn)寫(xiě)樣式
警告 以下所述內(nèi)容有瀏覽器兼容性問(wèn)題。
不管你是通過(guò)style屬性獲得內(nèi)聯(lián)樣式，還是通過(guò)剛剛討論的函數(shù)獲取其他的樣式，當(dāng)你嘗試讀取簡(jiǎn)寫(xiě)樣式時(shí)，都會(huì)遇到問(wèn)題。
看這個(gè)邊框（border）的定義
<p id="test" style="border: 1px solid #cc0000;">Text</p>
因?yàn)檫@是一個(gè)內(nèi)聯(lián)樣式，你期望這行代碼可以工作：
alert(document.getElementById('test').style.border);
不幸的是，它不能。不同瀏覽器在彈出對(duì)話框中顯示的確切的值是不一致的。
l Explorer 6給出的是 #cc0000 1px solid。
l Mozilla 1.7.12給出的是1px solid rgb(204,0,0)。
l Opera 9給出的是1px solid #cc0000。
l Safari 1.3沒(méi)有給出任何邊框值。
問(wèn)題出在border是一個(gè)簡(jiǎn)寫(xiě)形式的聲明。它暗中包括了不少于12個(gè)樣式：上（top）、左（left）、下（bottom）和右（right）邊框的寬度（width）、風(fēng)格（style）和顏色（color）。相似地，font聲明是font-size、font-family、font-weight和line-height的簡(jiǎn)寫(xiě)形式，所以它也會(huì)展現(xiàn)相似的問(wèn)題。
rgb()
注意Mozilla使用的特殊的color語(yǔ)法：rgb(204,0,0)。這是傳統(tǒng)的#cc0000的有效的替代值。你可以在CSS和JavaScript中任意選擇一個(gè)語(yǔ)法使用。
瀏覽器是如何處理這些簡(jiǎn)寫(xiě)形式的聲明呢？上面的例子似乎過(guò)于直接；你的直覺(jué)應(yīng)該是期望瀏覽器返回1px solid #cc0000，確保與內(nèi)聯(lián)樣式所定義的一致。不幸的是，簡(jiǎn)寫(xiě)形式的屬性比那還復(fù)雜的多。
考慮下面的情形：
p {
border: 1px solid #cc0000;
}
<p id="test" style="border-color: #00cc00;">Test</p>
alert(document.getElementById('test').style.borderRightColor);
所有瀏覽器都匯報(bào)正確的顏色，盡管內(nèi)聯(lián)樣式中沒(méi)有包含border-right-color而是聲明了border-color。顯然瀏覽器認(rèn)為右邊框的顏色在設(shè)置整個(gè)邊框顏色時(shí)被設(shè)置，這也是合邏輯的。
正如你看到的，瀏覽器必須為這些異常情況制定規(guī)則，而且它們已經(jīng)選擇了略有不同的方式去處理簡(jiǎn)寫(xiě)形式的聲明。在缺乏處理簡(jiǎn)寫(xiě)屬性的明確規(guī)范的情況下，很難評(píng)判哪個(gè)瀏覽器是對(duì)還是錯(cuò)。
JavaScript技術(shù)：ppk談JavaScript style屬性，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
