這次帶給大家js設定元素樣式步奏詳解，js設定元素樣式的注意事項有哪些，下面就是實戰案例，一起來看一下。
很多人對於js的開發中，不知道其元素樣式具體怎麼設置，這次文章就給大家帶來js設置教程，讓大家更好的了解js怎麼設置的，感興趣的下面一起來看看。
一看到這個標題，大家可能首先想到的就是使用「[元素].style.[css屬性名稱] = [屬性值]」這樣的套路去設定元素樣式，但實際上，我們其實還有其他方式可以選擇。
接下來，我將詳細介紹三種設定元素樣式的方式。
一、style
這個其實就是我們所熟知的方式，舉例~~
<p id="box"></p>
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" rel="external nofollow" />
當然，這個樣式表得真實存在，就算裡面什麼樣式都不寫也沒關係。也可以直接用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。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是js設定元素樣式步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
