盤點JavaScript和CSS交互的方法

隨着瀏覽器不斷的升級改進，CSS和JavaScript之間的界限愈來愈模糊。原本它們是負責着徹底不一樣的功能，但最終，它們都屬於網頁前端技 術，它們須要相互密切的合做。咱們的網頁中都有.js文件和.css文件，但這並不意味着CSS和js是獨立不能交互的。下面要講的這五種 JavaScript和 CSS共同合做的方法！

用JavaScript獲取僞元素(pseudo-element)屬性

你們都知道如何經過一個元素的style屬性獲取它的CSS樣式值，但能獲取僞元素(pseudo-element)的屬性值嗎？能夠的，使用JavaScript也能夠訪問頁面中的僞元素。

看見了嗎，上面能訪問僞元素裏的content屬性值。若是想建立一個動態的，風格別緻的網站，這是一種很是有用的技術！

classList API

不少的JavaScript工具庫裏都有addClass，removeClass和toggleClass等方法。爲了對老式瀏覽器的兼容，這些 類庫採 用的方法都是先搜索元素的className，追加和刪除這個類，而後更新className。其實有一個新型的API提供了添加，刪除和反轉 CSS類屬 性的方法，叫作classList：

直接對樣式表進行添加和刪除樣式規則

咱們都很是熟悉使用element.style.propertyName來修改樣式，使用JavaScript能幫助咱們作到這些，但你知道如何新增或修一個現有的CSS樣式規則嗎？其實很是的簡單。

這種方法一般是用來建立一個新的樣式規則，但若是你想修改一個現有的規則，也能夠這樣作。

加載CSS文件

延遲加載圖片、JSON、腳本等是用來加快頁面顯示速度的好方法。咱們可使用curl.js等這樣JavaScript加載器來延遲加載這些外部資源，可你知道CSS樣式表也能夠延遲加載嗎，並且在加載成功後回調函數會給予通知。

CSS鼠標指針事件

CSS鼠標指針事件pointer-events屬性很是的有趣，它的功效很是像JavaScript，當你把這個屬性設置爲none時，它能有效的阻止禁止這個元素，你也許會說「這又如何？」，但事實上，它是禁止了這個元素上的任何JavaScript事件或回調函數！

點擊這個元素，你會發現任何你放置在這個元素上的監聽器都不會觸發任何事件。一個神奇的功能，真的——你不在須要爲了防止某個事件會被觸發而去檢查某個css類是否存在。

做爲Web前端開發神器——WebStorm的智能化表現和可視化操做，大大的提供了前端開發的效率。慧都目前推出【正版IDE聯合推廣計劃】和【在線購買優惠活動】，WebStorm如今能夠7折都買了，另外還有5折限時搶購。