|
|
注意JavaScript使用的是className去訪問(wèn)class屬性，因?yàn)閏lass是一個(gè)保留關(guān)鍵字，因?yàn)閷?lái)JavaScript可能開(kāi)始支持像Java一樣的類(lèi)。
我們?cè)谟懻搒tyle屬性時(shí)遇到了棘手的細(xì)節(jié)問(wèn)題和瀏覽器差異性帶來(lái)的麻煩，正如同經(jīng)歷一場(chǎng)驚濤駭浪。而class和id的更改則像是沙漠里一片平靜的綠洲，瀏覽器們?cè)谶@里和諧相處。思考這個(gè)例子：
p {
color: #000000; /* black */
}
p.emphasis {
color: #cc0000; /* red */
}
<p id="test">Test</p>
最初，該段落沒(méi)有定義class，所以它的字體顏色是黑色。不過(guò)，一行JavaScript就足以改變它的樣式：
document.getElementById('test').className = 'emphasis';
瞬間文字變成了紅色。如果想要改變回來(lái)，你可以按如下操作：
document.getElementById('test').className = '';
你移除了樣式，該段落恢復(fù)到默認(rèn)的p{}規(guī)則。
對(duì)于一個(gè)實(shí)際應(yīng)用中的例子，看看“限長(zhǎng)的文本輸入?yún)^(qū)”。計(jì)數(shù)器有這樣的結(jié)構(gòu)和呈現(xiàn)樣式（該結(jié)構(gòu)由JavaScript動(dòng)態(tài)生成，不過(guò)那不影響這個(gè)例子）：
<div class="counter"><span>12</span>/1250</div>
div.counter {
font-size: 80%;
padding-left: 10px;
}
span.toomuch {
font-weight: 600;
color: #cc0000;
}
當(dāng)腳本發(fā)現(xiàn)用戶(hù)輸入的文字一定達(dá)到了最大長(zhǎng)度，它修改作為計(jì)數(shù)器的<span>的class為toomuch：
[限長(zhǎng)的文本輸入?yún)^(qū)，第20～23行]
if (currentLength > maxLength)
this.relatedElement.className = 'toomuch';
else
this.relatedElement.className = '';
現(xiàn)在，作為計(jì)數(shù)器的<span>字體變成粗體和紅色。
id的變更以幾乎完全一樣的方式工作：
p {
color: #000000; /* black */
}
p#emphasis {
color: #cc0000; /* red */
}
<p>Test</p>
document.getElementsByTagName('p')[0].id = 'emphasis';
該段落的文字再次變成了紅色。但是，我建議你不要過(guò)多改變id。除了作為CSS的鉤子，它們也常常作為JavaScript的鉤子，改變它們可能存在不確定的副作用。
增加class
通常，你不會(huì)給一個(gè)元素的class設(shè)置新值，而只是添加一個(gè)class。因?yàn)槟悴幌Ｍ瞥匾呀?jīng)擁有的任何樣式。因?yàn)镃SS允許復(fù)合樣式，新class所包含的樣式被添加到元素上，不會(huì)移除任何已經(jīng)存在的class的CSS指令。
“表單驗(yàn)證”中的writeError()和removeError()函數(shù)是一個(gè)很好的例子。一般來(lái)說(shuō)我會(huì)給表單域應(yīng)用好幾個(gè)class，因?yàn)閳D形設(shè)計(jì)師經(jīng)常對(duì)輸入框使用兩個(gè)甚至三個(gè)寬度。當(dāng)一個(gè)表單域包含錯(cuò)誤的時(shí)候，我希望添加一個(gè)特別的警告樣式，但我不希望攪亂該元素已經(jīng)擁有的樣式。所以，我不能簡(jiǎn)單地覆蓋舊的class值，那樣我將失去已經(jīng)指定的寬度。
看這樣的情形：
<input class="smaller" name="name" />
input.smaller {
width: 75px;
}
input.errorMessage {
border-color: #cc0000;
}
最開(kāi)始，輸入框的寬度是75px。如果腳本設(shè)置class為'errorMessage'并且刪除舊值，表單域會(huì)得到一個(gè)紅色的邊框，但也失去了它的寬度，而那樣的話可能會(huì)讓用戶(hù)感到非常迷惑。
因此，我是添加了errorMessage class：
[表單驗(yàn)證，第105～106行]
function writeError(obj,message) {
obj.className += ' errorMessage';
這段代碼取得已存在的className并在其后附加一個(gè)新的class，在它之前加一個(gè)空格。這個(gè)空格分隔新的class和任何對(duì)象可能已經(jīng)擁有的class值。現(xiàn)在輸入框除了擁有75px寬度之外，如我們所愿地得到了紅色邊框。該表單域現(xiàn)在應(yīng)用了兩個(gè)class，HTML就好像這樣：
<input class="smaller errorMessage" name="name" />
Class在Mozilla中的名稱(chēng)與空白
你可能注意到removeError()移除class的值errorMessage的時(shí)候沒(méi)有前置的空格。那是因?yàn)橐粋€(gè)瀏覽器的bug。當(dāng)你添加errorMessage到一個(gè)原來(lái)沒(méi)有值的class的時(shí)候，Mozilla會(huì)刪除前置空格。如果我們隨后執(zhí)行replace(/ errorMessage/,'')，Mozilla不能移除class，它找不到字符串errorMessage，因?yàn)榍爸每崭褚呀?jīng)不在了。
移除class
一旦用戶(hù)修正了她的錯(cuò)誤，class的值errorMessage應(yīng)該被移除，但任何原來(lái)的class，比如smaller，不應(yīng)該受到影響。removeError()函數(shù)提供了這個(gè)功能：
[表單驗(yàn)證，第119～120行]
function removeError() {
this.className = this.className.replace(/errorMessage/,'');
它先取得元素的class然后替換字符串'errorMessage'為''（一個(gè)空字符）。errorMessage從class的值中被取走，但對(duì)其他的值沒(méi)有影響。表單域失去了紅色的邊框顏色，但依然維持75px的寬度。
JavaScript技術(shù)：JavaScript更改class和id的方法，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
