隨着瀏覽器不斷的升級改進，CSS和JavaScript之間的界限越來越模糊。本來它們是負責着完全不同的功能，但最終，它們都屬於網頁前端技術，它們需要相互密切的合作。我們的網頁中都有.js文件和.css文件，但這並不意味着CSS和js是獨立不能交互的。
下面要講的這五種JavaScript和CSS共同合作的方法你也許未必知道！
1.用JavaScript獲取偽元素(pseudo-element)屬性
大家都知道如何通過一個元素的style屬性獲取它的CSS樣式值，但能獲取偽元素(pseudo-element)的屬性值嗎？可以的，使用JavaScript也可以訪問頁面中的偽元素。
看見了嗎，我能訪問偽元素里的content屬性值。如果你想創建一個動態的，風格別致的網站，這是一種非常有用的技術！
2.classList API
很多的JavaScript工具庫里都有addClass，removeClass和toggleClass等方法。為了對老式瀏覽器的兼容，這些類庫采用的方法都是先搜索元素的className，追加和刪除這個類，然后更新className。
其實有一個新型的API提供了添加，刪除和反轉CSS類屬性的方法，叫做classList：
大多數的瀏覽器里很早就實現了classListAPI，而且最終IE10里也實現了它。
3.直接對樣式表進行添加和刪除樣式規則
我們都非常熟悉使用element.style.propertyName來修改樣式，使用JavaScript能幫助我們做到這些，但你知道如何新增或修一個現有的CSS樣式規則嗎？其實非常的簡單。
這種方法通常是用來創建一個新的樣式規則，但如果你想修改一個現有的規則，也可以這樣做。
4.加載CSS文件
延遲加載圖片、JSON、腳本等是用來加快頁面顯示速度的好方法。我們可以使用curl.js等這樣JavaScript加載器來延遲加載這些外部資源，可你知道CSS樣式表也可以延遲加載嗎，而且在加載成功后回調函數會給予通知。
本網站使用的PrismJS語法高亮腳本就是延遲加載的。當所有的資源都加載后，回調函數就會觸發，我可在回調函數里加載它。非常有用！
5.CSS鼠標指針事件
CSS鼠標指針事件pointer-events屬性非常的有趣，它的功效非常像JavaScript，當你把這個屬性設置為none時，它能有效的阻止禁止這個元素，你也許會說“這又如何？”，但事實上，它是禁止了這個元素上的任何JavaScript事件或回調函數！
點擊這個元素，你會發現任何你放置在這個元素上的監聽器都不會觸發任何事件。一個神奇的功能，真的——你不在需要為了防止某個事件會被觸發而去檢查某個css類是否存在。
就是這5給你也許還沒有發現的CSS和JavaScript交互的方法。你還有新的發現嗎？分享出來！
譯文：http://www.webhek.com/post/ways-css-javascript-interact.html
原文：http://davidwalsh.name/ways-css-javascript-interact
-
本公眾號內回復 “資料”, 查看並下載前端及各種編程視頻資料
-
回復“面試題”“ajax”等關鍵詞，可查看前端面試題
-
其它功能正在完善，不定期更新....