avaScript修改CSS有4種方法：1.修改節(jié)點(diǎn)style(內(nèi)聯(lián)樣式);2.改變節(jié)點(diǎn)class或id;3.寫入新的css;4.替換頁(yè)面中的樣式表。今天主要給大家介紹下前2種，因?yàn)楹髢煞N個(gè)人不是很推薦大家使用

JavaScript允許你即時(shí)的改變CSS樣式，這樣就可以將用戶的眼球吸引到你想他們關(guān)注的地方上，并且提供較好的交互體驗(yàn)給力 。

JavaScript修改CSS有4種方法：

修改節(jié)點(diǎn)style(內(nèi)聯(lián)樣式);

改變節(jié)點(diǎn)class或id;

寫入新的css;

替換頁(yè)面中的樣式表。

個(gè)人不建議使用后兩種方法，幾乎所有的功能都可以通過(guò)前兩種方式實(shí)現(xiàn)，并且代碼更加清晰、易理解。

后面還會(huì)說(shuō)說(shuō)如何獲取元素的真實(shí)樣式和一個(gè)表單中的注意事項(xiàng)。

1、修改節(jié)點(diǎn)style(內(nèi)聯(lián)樣式)

這種方法權(quán)重是最高的，直接寫在節(jié)點(diǎn)的style屬性上，他會(huì)覆蓋其他方法設(shè)置的樣式。使用方法很簡(jiǎn)單：

var element = document.getElementById("test");

element.style.display = "none" //讓元素隱藏

但是要注意的是，有些CSS樣式名稱是由幾個(gè)單詞組成的例如font-size、background-image等，他們都是用破折號(hào)(-)連接起來(lái)的，然而JavaScript中破折號(hào)表示“減”，因此不能作為屬性名稱。我們需要使用“駝峰格式(camelCase)”來(lái)書(shū)寫屬性名，例如fontSize、backgroundImage。

還要注意的是，很多style都是有單位的，不能只給一個(gè)數(shù)字。例如fontSize的單位有px、em、%(百分比)等。

這種方法違背了表現(xiàn)和行為分離的原則，一般只適合定義元素經(jīng)常變化的即時(shí)樣式(與行為相關(guān))，例如一個(gè)可用于拖拽的div，隨著拖拽，他的top、left屬性是不斷變換的，此時(shí)就不能用class或其他方式定義了，使用這種方式可以即時(shí)修改樣式，并且覆蓋掉其他方式的設(shè)置。

2、更改class、id

id和class是設(shè)置樣式的“鉤子”，更改之后瀏覽器會(huì)自動(dòng)更新元素的樣式。

更改id的方法和class的類似，但是個(gè)人并不建議這樣使用，因?yàn)閕d是用于定位元素的，最好不要用它來(lái)定義元素的顯示樣式，并且id也常作為JavaScript的鉤子，可能會(huì)引起不必要的錯(cuò)誤。

在JavaScript中，class是一個(gè)保留關(guān)鍵字，因此使用className作為訪問(wèn)元素class的屬性，例如：

.redColor{

color: red;

}

.yellowBack{

background: yellow;

}

element.className = "redColor";//設(shè)置class

element.className += " yellowBack";//增加class

但比較郁悶的是，這個(gè)屬性是一個(gè)包含元素所有class的字符串，所有class以空格分開(kāi)，這樣在刪除class時(shí)就很不方便(增加就好說(shuō)，之間做個(gè)字符串連接就可以了，不過(guò)記得前面要加個(gè)空格~)。

我之前在刪除的時(shí)候用了正則表達(dá)式，根據(jù)class在字符串中的不同位置進(jìn)行刪除(頭部、尾部、中間)，不過(guò)后來(lái)想到了更好的辦法，就是在className屬性頭尾都加上一個(gè)空格，那就全部變成中間的方法了，直接進(jìn)行子串替換：

//刪除class

function removeClass(element,classRomove){

var classNames = " "+element.className+" ";

classNames = classNames .replace(" "+classRomove+" ", " ");

//String.trim(classNames);

element.className = classNames;

}

一般的樣式修改最好都用這種方法，定義好CSS的樣式，JavaScript只是發(fā)出樣式改變的指令，具體的樣式定義還是交給CSS去做。

后兩種方法，既不優(yōu)雅，也有一定兼容性問(wèn)題，我就不介紹了~

3、獲取真實(shí)樣式

首先要說(shuō)清楚的是，通過(guò)element.style是不行的，他只能獲取內(nèi)聯(lián)樣式，樣式表中的定義無(wú)法獲取到。

既然元素的樣式可以定義在這么多種地方，那他的真實(shí)樣式到底是什么樣子就不好說(shuō)了，有什么辦法能獲取到元素在瀏覽器中顯示的真實(shí)樣式呢?

其實(shí)微軟和W3C都提供了相應(yīng)的方法，我們只需要進(jìn)行一下封裝就可以用了：

//獲取元素樣式

function getRealStyle(element,styleName){

var realStyle = null;

if(element.currentStyle){

realStyle = element.currentStyle[styleName];//IE

}else if(window.getComputedStyle){

realStyle=window.getComputedStyle(element,null)[styleName];//W3C

}

return realStyle;

}

記得傳入的styleName是用“駝峰格式”的~~

4、表單的顯示和隱藏(不要濫用CSS)

我們經(jīng)常會(huì)見(jiàn)到一些表單的選項(xiàng)是動(dòng)態(tài)添加的，例如你某個(gè)表單中選擇了婚姻狀態(tài)是“已婚”，那么就會(huì)多一個(gè)輸入框讓你輸入配偶的姓名。

如果沒(méi)有選擇那當(dāng)然就要把“配偶”的相關(guān)表單都隱藏了，但在這個(gè)時(shí)候不應(yīng)當(dāng)用CSS來(lái)解決，即不能用style.display=”none”來(lái)隱藏。

因?yàn)闊o(wú)論你隱還是不隱藏它，輸入框就在那里，不增不減~ [暈] 直白點(diǎn)說(shuō)，就是雖然隱藏了，但他還是存在與DOM中，如果此時(shí)用戶提交表單，會(huì)把這個(gè)隱藏的輸入框的內(nèi)容一起提交，可能會(huì)出現(xiàn)些意想不到的錯(cuò)誤~

正確的做法是將這段內(nèi)容放入DOM超空間中，這樣就不會(huì)有上面的問(wèn)題了

更多信息請(qǐng)查看IT技術(shù)專欄