JS如何設定元素樣式?

一看到這個標題，大家可能首先想到的就是使用“[元素].style.[CSS屬性名] = [屬性值]”這樣的套路去設定元素樣式，但實際上，我們其實還有其他方式可以選擇。

接下來，我將詳細介紹三種設定元素樣式的方式。

一、style

這個其實就是我們所熟知的方式，舉個例子~~

<div id="box"></div>

var box = document.getElementById("box");
box.style.width = `100px`;
box.style.height = `100px`;
box.style.backgroundColor = "#f00";

顯示效果：

這種方式看似簡單粗暴，但寫法過於繁冗，尤其是在需要新增很多樣式時尤為突出。並且需要注意的是，對於使用短劃線的CSS屬性名，必須將其轉換成駝峰大小寫形式。（如示例中的backgroundColor）

二、style.cssText

這種方式相對於上面方法更為簡潔，更像是直接在元素上寫CSS：

[元素].style.cssText = [CSS樣式];

例如：

box.style.cssText = `width: 200px; height: 200px; border: 1px solid #f00;`;

確實，寫法上很方便。

但是，缺點是後面同樣通過這種方式新增的樣式會覆蓋之前通過style特性指定的樣式。

同樣還是上面的例子，只不過是將兩段JS寫在一塊：

var box = document.getElementById("box");
box.style.width = `100px`;
box.style.height = `100px`;
box.style.backgroundColor = "#f00";
box.style.cssText = `width: 200px; height: 200px; border: 1px solid #f00;`;

如果按照層疊樣式表的特性，上面定義的紅色的背景顏色應該還存在，然而實際上，下面通過style.cssText方式定義的樣式會將style（包括style.cssText）方式新增的樣式全部重寫。所以，這個例子最終表現結果與上面只有一句時的效果是一樣的：

最後注意下相容性，IE8及更早版本均不支援cssText。

三、insertRule()

這個用法相對上面兩種方法都較為複雜一些：

[sheet].insertRule([CSS樣式]，指定位置)

[sheet]表示某個樣式表，它可以通過document.styleSheets來獲得。那麼，document.styleSheets又是什麼呢？ 說得簡單一點就是應用在文件中的所有樣式表，包括通過link標籤引入的樣式和style標籤定義的樣式。如果理解上還是有點困難，那麼我們還是放個例項吧~~

首先頭部引入樣式表：

<link rel="stylesheet" type="text/css" href="css/index.css"/>

當然，這個樣式表得真實存在，就算裡面什麼樣式都不寫也沒關係。也可以直接用style標籤，內容為空也不要緊。

然後用JS獲取這個樣式表：

var sheet = document.styleSheets[0];

最後我們就可以給這個樣式表中新增樣式了：

sheet.insertRule(`#box{width: 300px; height: 300px; background-color: #0f0;}`,0);

如果是在上面所有例子的基礎上新增的這段程式碼，那麼顯示結果會是這樣的：

大小還是200*200大小，背景顏色是綠色，說明通過style.cssText所設定的寬高樣式把通過insertRule()設定的樣式覆蓋了，原因很簡單，style（包括style.cssText）方式設定的樣式屬於行內樣式，自然要比通過insertRule()設定的樣式優先順序更高咯~~

那麼，示例當中insertRule()的第二個引數0又是指的什麼呢？

它指的是我們需要新增CSS程式碼的位置，所以引數0就代表的是該樣式表的最開始位置。

例如，我們先給樣式表中手動新增一段樣式（以下例子與上述例子無關）：

<style>
    #box{ width: 100px; height: 100px;}
</style>

var sheet = document.styleSheets[0];
sheet.insertRule(`#box{width: 300px; height: 300px; background-color: #0f0;}`,0);

以上執行結果就是，寬高100*100的綠色盒子：

如果將insertRule()中的第二個引數改為1，那麼通過JS新增的這段CSS程式碼相當於新增到了#box{ width: 100px; height: 100px;}的後面，類似下面這樣：

<style>
    #box{ width: 100px; height: 100px;}
    #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>

顯示結果：

同樣需要注意的是，insertRule()不相容IE8及更早版本，但可以使用addRule()替代，語法稍微有點不同，上面例子這樣寫：

sheet.addRule(`#box`,`width: 300px; height: 300px; background-color: #0f0;`,0);

第一個引數代表元素，第二個引數代表CSS樣式，第三個引數代表插入位置，前兩個引數必選，最後一個可選，不填則預設為0。

結束語：瀏覽器相容性問題對於前端開發者來說一直是個很頭疼的問題，很多問題也是主要集中在IE上，只希望可惡的IE早日退出歷史舞臺吧！