一看到這個(gè)標(biāo)題，大家可能首先想到的就是使用“[元素].style.[CSS屬性名] = [屬性值]”這樣的套路去設(shè)置元素樣式，但實(shí)際上，我們其實(shí)還有其他方式可以選擇。
接下來玲躯，我將詳細(xì)介紹三種設(shè)置元素樣式的方式。
一鳄乏、style
這個(gè)其實(shí)就是我們所熟知的方式跷车，舉個(gè)例子~~
<div id="box"></div>
var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
顯示效果：
這種方式看似簡單粗暴，但寫法過于繁冗橱野，尤其是在需要添加很多樣式時(shí)尤為突出朽缴。并且需要注意的是，對(duì)于使用短劃線的CSS屬性名仲吏，必須將其轉(zhuǎn)換成駝峰大小寫形式不铆。（如示例中的backgroundColor）
二、style.cssText
這種方式相對(duì)于上面方法更為簡潔裹唆，更像是直接在元素上寫CSS：
[元素].style.cssText = [CSS樣式];
例如：
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';
確實(shí)誓斥，寫法上很方便。
但是许帐，缺點(diǎn)是后面同樣通過這種方式添加的樣式會(huì)覆蓋之前通過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;';
如果按照層疊樣式表的特性成畦，上面定義的紅色的背景顏色應(yīng)該還存在距芬，然而實(shí)際上涝开，下面通過style.cssText方式定義的樣式會(huì)將style（包括style.cssText）方式添加的樣式全部重寫。所以框仔，這個(gè)例子最終表現(xiàn)結(jié)果與上面只有一句時(shí)的效果是一樣的：
最后注意下兼容性舀武，IE8及更早版本均不支持cssText。
三离斩、insertRule()
這個(gè)用法相對(duì)上面兩種方法都較為復(fù)雜一些：
[sheet].insertRule([CSS樣式]银舱，指定位置)
[sheet]表示某個(gè)樣式表，它可以通過document.styleSheets來獲得跛梗。那么寻馏，document.styleSheets又是什么呢？ 說得簡單一點(diǎn)就是應(yīng)用在文檔中的所有樣式表核偿，包括通過link標(biāo)簽引入的樣式和style標(biāo)簽定義的樣式诚欠。如果理解上還是有點(diǎn)困難，那么我們還是放個(gè)實(shí)例吧~~
首先頭部引入樣式表：
<link rel="stylesheet" type="text/css" href="css/index.css"/>
當(dāng)然漾岳，這個(gè)樣式表得真實(shí)存在轰绵，就算里面什么樣式都不寫也沒關(guān)系。也可以直接用style標(biāo)簽蝗羊，內(nèi)容為空也不要緊藏澳。
然后用JS獲取這個(gè)樣式表：
var sheet = document.styleSheets[0];
最后我們就可以給這個(gè)樣式表中添加樣式了：
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);
如果是在上面所有例子的基礎(chǔ)上添加的這段代碼仁锯，那么顯示結(jié)果會(huì)是這樣的：
大小還是200*200大小耀找，背景顏色是綠色，說明通過style.cssText所設(shè)置的寬高樣式把通過insertRule()設(shè)置的樣式覆蓋了业崖，原因很簡單野芒，style（包括style.cssText）方式設(shè)置的樣式屬于行內(nèi)樣式，自然要比通過insertRule()設(shè)置的樣式優(yōu)先級(jí)更高咯~~
那么双炕，示例當(dāng)中insertRule()的第二個(gè)參數(shù)0又是指的什么呢狞悲？
它指的是我們需要添加CSS代碼的位置，所以參數(shù)0就代表的是該樣式表的最開始位置妇斤。
例如摇锋，我們先給樣式表中手動(dòng)添加一段樣式（以下例子與上述例子無關(guān)）：
<style>
#box{ width: 100px; height: 100px;}
</style>
var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);
以上執(zhí)行結(jié)果就是，寬高100*100的綠色盒子：
如果將insertRule()中的第二個(gè)參數(shù)改為1站超，那么通過JS添加的這段CSS代碼相當(dāng)于添加到了#box{ width: 100px; height: 100px;}的后面荸恕，類似下面這樣：
<style>
#box{ width: 100px; height: 100px;}
#box{ width: 300px; height: 300px; background-color: #0f0;}
</style>
顯示結(jié)果：
同樣需要注意的是，insertRule()不兼容IE8及更早版本死相，但可以使用addRule()替代融求，語法稍微有點(diǎn)不同，上面例子這樣寫：
sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);
第一個(gè)參數(shù)代表元素算撮，第二個(gè)參數(shù)代表CSS樣式生宛，第三個(gè)參數(shù)代表插入位置县昂，前兩個(gè)參數(shù)必選，最后一個(gè)可選陷舅，不填則默認(rèn)為0倒彰。
結(jié)束語：瀏覽器兼容性問題對(duì)于前端開發(fā)者來說一直是個(gè)很頭疼的問題，很多問題也是主要集中在IE上莱睁，只希望可惡的IE早日退出歷史舞臺(tái)吧狸驳！
