你可能不知道的5種 CSS 和 JS 的互動方式

　　CSS和JavaScript: 在各個瀏覽器版本中的分界線似乎變得越來越模糊，兩者所完成的功能差異非常明顯,但說到底他們都是前端技術，所以確實需要緊密地配合。雖然我們將程式碼拆分到獨立的 .js 檔案和 .css 檔案中，但他們之間還能進行一些更密切的互動，這些通常是普通JS框架所不支援的。

　　下面是你可能不知道的CSS和JS的互動的5種方式: 

　　使用JavaScript獲取CSS偽元素屬性

　　我們可以通過DOM元素的 style 屬性獲取基本的CSS樣式值, 但怎麼獲取CSS偽元素屬性呢? 確實，JavaScript提供了相應的API:

// 獲取 .element:before 的 color 值
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');


// 獲取 .element:before 的 content 值
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

　　你可以檢視作者的部落格文章: Device State Detection, 如果你想建立動態,獨特的網站那會非常有用。

　　classList API

　　在最受歡迎的JS框架中,我們可以使用 addClass , removeClass , 以及 toggleClass 方法來處理 class 列表. 為了相容舊版本瀏覽器,每個框架都會先獲取元素的 className屬性(型別為String) 並新增/移除 相應的 class, 然後再更新 className 字串. 現在,有一個新的API可以用來高效地 新增,刪除,切換 class,名為 classList:

myDiv.classList.add('myCssClass'); // 新增 class
myDiv.classList.remove('myCssClass'); // 移除 class
myDiv.classList.toggle('myCssClass'); // 切換 class

　　大多數瀏覽器支援 classList 已經好幾年了,但是 IE 很杯具的在 10.0 版本才開始支援。

　　直接操作樣式表

　　我們對於使用 element.style.propertyName 這種形式的方法修改樣式都很熟悉，並可以通過 JavaScript 工具來處理，但你知道 怎樣在新的和已存在的 stylesheets 中 讀取和寫入樣式規則 嗎? 這個API也是很簡單的:

function addCSSRule(sheet, selector, rules, index) {
    // 注意 sheet 的新 API 
    if(sheet.insertRule) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else {
        sheet.addRule(selector, rules, index);
    }
}


// 呼叫!
addCSSRule(document.styleSheets[0], "header", "float: left");

　　通常是使用此種方式來建立一個新的樣式表,但如果你想修改一個現有的樣式表也可以,快試試吧！

　　使用 Loader 載入 CSS 檔案

　　對圖片, JSON,以及JS指令碼的懶載入是減少頁面顯示時間的有效方法。我們可以通過 curl.js 或者 jQeury 庫載入這些外部資源, 但你知道如何 懶載入樣式表 並在載入完成後觸發回撥函式麼?

curl(
    [
        "namespace/MyWidget",
        "css!namespace/resources/MyWidget.css"
    ], 
    function(MyWidget) {
        // 使用 MyWidget 進行
        // The CSS reference isn't in the signature because we don't care about it;
        // we just care that it is now in the page
    }
});

　　本部落格的原文 就使用懶載入 匯入了 PrismJS，基於 pre 元素實現文字的高亮顯示。在所有資源(包括css)載入完成後，會呼叫回撥函式,這應該是很有用的。

　　CSS 的 pointer-events 屬性

　　CSS' pointer-events 屬性扮演了一種類似 JavaScript 的方式, 如果 pointer-events 值為 none 則禁用某個元素,不為 none 則允許元素的常用功能。可能你會問: "這有什麼用?" 好處是 pointer-events 能高效地阻止觸發 JavaScript 事件.

.disabled { pointer-events: none; }

　　在元素上的 click 以及通過 addEventListener 新增的回撥函式都不會被觸發。這真是一個完美的屬性，真的 —— 你在回撥函式中不需要先檢測 className  以決定某些分支。

　　上面列舉了CSS與Javascript互動的5種方式，還有更多的互動方式嗎？ 歡迎您進行分享！

　　原文連結:  5 Ways that CSS and JavaScript Interact That You May Not Know About