JavaScript改變CSS樣式的方法匯總

JavaScript改變CSS樣式的方法匯總

 　　JavaScript修改CSS有4種方法：1.修改節點style(內聯樣式);2.改變節點class或id;3.寫入新的css;4.替換頁面中的樣式表。今天主要給大家介紹下前2種，因為後兩種個人不是很推薦大家使用

　　JavaScript允許你即時的改變CSS樣式，這樣就可以將使用者的眼球吸引到你想他們關注的地方上，並且提供較好的互動體驗給力 。

　　JavaScript修改CSS有4種方法：

　　修改節點style(內聯樣式);

　　改變節點class或id;

　　寫入新的css;

　　替換頁面中的樣式表。

　　個人不建議使用後兩種方法，幾乎所有的功能都可以通過前兩種方式實現，並且代碼更加清晰、易理解。

　　後面還會說說如何擷取元素的真實樣式和一個表單中的注意事項。

　　1、修改節點style(內聯樣式)

　　這種方法權重是最高的，直接寫在節點的style屬性上，他會覆蓋其他方法設定的樣式。使用方法很簡單：

　　?

1 2	var element = document.getElementById("test"); element.style.display = "none" //讓元素隱藏

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

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

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

　　2、更改class、id

　　id和class是設定樣式的“鉤子”，更改之後瀏覽器會自動更新元素的樣式。

　　更改id的方法和class的類似，但是個人並不建議這樣使用，因為id是用於定位元素的，最好不要用它來定義元素的顯示樣式，並且id也常作為JavaScript的鉤子，可能會引起不必要的錯誤。

　　在JavaScript中，class是一個保留關鍵字，因此使用className作為訪問元素class的屬性，例如：

　　?

1 2 3 4 5 6 7 8

.redColor{ color: red; } .yellowBack{ background: yellow; } element.className = "redColor";//設定class element.className += " yellowBack";//增加class

　　但比較鬱悶的是，這個屬性是一個包含元素所有class的字串，所有class以空格分開，這樣在刪除class時就很不方便(增加就好說，之間做個字串串連就可以了，不過記得前面要加個空格~)。

　　我之前在刪除的時候用了Regex，根據class在字串中的不同位置進行刪除(頭部、尾部、中間)，不過後來想到了更好的辦法，就是在className屬性頭尾都加上一個空格，那就全部變成中間的方法了，直接進行子串替換：

　　?

1 2 3 4 5 6 7

//刪除class function removeClass(element,classRomove){ var classNames = " "+element.className+" "; classNames = classNames .replace(" "+classRomove+" ", " "); //String.trim(classNames); element.className = classNames; }

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

　　後兩種方法，既不優雅，也有一定相容性問題，我就不介紹了~

　　3、擷取真實樣式

　　首先要說清楚的是，通過element.style是不行的，他只能擷取內聯樣式，樣式表中的定義無法擷取到。

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

　　其實微軟和W3C都提供了相應的方法，我們只需要進行一下封裝就可以用了：

　　?

1 2 3 4 5 6 7 8 9 10

//擷取元素樣式 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)

　　我們經常會見到一些表單的選項是動態添加的，例如你某個表單中選擇了婚姻狀態是“已婚”，那麼就會多一個輸入框讓你輸入配偶的姓名。

　　如果沒有選擇那當然就要把“配偶”的相關表單都隱藏了，但在這個時候不應當用CSS來解決，即不能用style.display=”none”來隱藏。

　　因為無論你隱還是不隱藏它，輸入框就在那裡，不增不減~ [暈] 直白點說，就是雖然隱藏了，但他還是存在與DOM中，如果此時使用者提交表單，會把這個隱藏的輸入框的內容一起提交，可能會出現些意想不到的錯誤~

　　正確的做法是將這段內容放入DOM超空間中，這樣就不會有上面的問題了。

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。