JS怎么設置元素樣式的-創新互聯

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標簽定義的樣式。如果理解上還是有點困難，那么我們還是放個實例吧~~

首先頭部引入樣式表：

當然，這個樣式表得真實存在，就算里面什么樣式都不寫也沒關系。也可以直接用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就代表的是該樣式表的最開始位置。

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

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;}的后面，類似下面這樣：

顯示結果：

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

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

第一個參數代表元素，第二個參數代表CSS樣式，第三個參數代表插入位置，前兩個參數必選，最后一個可選，不填則默認為0。

以上是“JS怎么設置元素樣式的”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。