本篇文章主要介紹JS操作CSS的各種方法。
一、前言
一般我們在專案中引入CSS樣式，可以通過link標籤引入外部樣式表，也可以通過style標籤引入樣式，最後可以直接在元素的行內設定style屬性值，不過這裡有一點要注意：
- style和link多有一個media屬性，預設是screen值，我們可以這樣賦值：media="screen and (max-width: 1000px)";當螢幕的寬度小於1000畫素時，此段樣式生效。
- media常見的屬性還有print,只有在列印或者列印預覽的時候樣式才會生效。
下面我們來聊聊用JS有多少種方式來修改一個元素的樣式。
二、style屬性
const demo = document.querySelector('.demo');
demo.style.width = "400px";
demo.style.background = "yellow";
複製程式碼當你採用這種方式修改元素的樣式時，如果原先設定的css樣式沒有用!important修飾的話，它的優先順序是最高的，這段樣式將插入到元素的style屬性中:
<div class="demo" style="width: 400px; background: yellow;"></div>
複製程式碼如果你對效能敏感的話，這樣多次的操作，顯然不是一個很好的習慣。所以這裡又來了個cssText:
demo.style.cssText = "background: blue;";
複製程式碼當我們使用cssText時，如果我們直接賦值的話，會覆蓋掉之前在style屬性裡面的值，所以這裡我們可以這樣：
demo.style.cssText += "background: blue;";
複製程式碼採用cssText減少了頻繁的賦值操作。
三、class屬性
我們多知道元素的class屬性也是影響元素樣式的要素之一，所以這裡我們想到了這種方法修改樣式:
demo.setAttribute('class','demo1');
複製程式碼這樣的確是個方法，但是同樣會覆蓋原先的類名，這裡我們需要這樣處理一下：
const attr = demo.getAttribute('class');
demo.setAttribute('class',attr + ' demo1');
複製程式碼這裡一定要注意，類名之間要用空格分開。
這裡我們也是費了一番周折修改了class屬性，實際上在標準已經為什麼我們新增了className的快捷屬性。
demo.className += " demo1";
複製程式碼這裡我們同樣要用空格分隔類名，仔細思考這兩種方法弊端還是不少：
- 需要採用空格分隔類名；
- 可能會新增重複的類名；
- 各種不舒服。。。。。。。
這裡就要引出我們的classList:
- add(classname): 新增類名；
- remove(classname): 刪除類名；
- item(n): 得到列表中的第n個類名；
- toggle(classname): 如果類名存在則刪除，否則新增；
- contains(classname): 判斷類名是不是存在。
這麼多快捷的方法，是不是很爽，自己玩去吧，我就不一一介紹了。通過類名更改元素樣式必須要了解類名的CSS優先順序，不然你就算新增一堆類名也沒有什麼用處。
四、style標籤
元素的style屬性，class屬性我們多動刀了，那麼我們還剩下什麼？修改link標籤的href屬性值，這未必有點太牽強了。那我們來修改style標籤吧。
我們可以通過哪些方式獲取style標籤的內容呢?
1、通過元素屬性獲取
我們可以給style標籤加上一個id:
<style id="demostyle">
.demo {
width: 200px;
height: 100px;
background: red;
}
</style>
複製程式碼然後我們就可以通過innerHTML、outerHTML和innerText獲取style標籤內容了。這裡我就採用innerText了：
document.getElementById('demostyle').innerText = ".demo {width: 1000px; height: 200px;background: yellow;}";
複製程式碼這裡我只是簡單的賦值，如果你要處理的很好的話，得用正則去處理這些字串，才能達到更好的效果。
2、通過document.styleSheets
除了上面這種方式獲取style標籤，我們還可以通過document.styleSheets,這個就要解決我們上面用innerText帶來的各種不方便，它有兩個方法:
- deleteRule(n): 刪除第n條cssRule；
- insertRule(rule, n): 在第n處插入一條cssRule。
對於上面的style標籤，我們可以這樣操作：
const style = document.styleSheets[0];
style.insertRule('div.demo {background: blue}',1);
複製程式碼這裡我們更要考慮CSS的優先順序問題，雖然我們向style中新增了一條cssRule，但是style中並不會顯示這條cssRule。我們只能通過document.styleSheets[0]來檢視新增的cssRule。
五、總結
折騰了半天，終於告一段落。二和三的方法主要運用於單個元素的樣式修改，而四應該可以用來修改一些公共樣式。
參考資料來源於MDN文件
喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.