用JavaScript獲取偽元素(pseudo-element)屬性
大家都知道如何通過一個元素的style屬性獲取它的CSS樣式值，但能獲取偽元素(pseudo-element)的屬性值嗎？可以的，使用JavaScript也可以訪問頁面中的偽元素。
01.// Get the color value of .element:before
02.
03.var color = window.getComputedStyle(
04.
05.document.querySelector('.element'), ':before'
06.
07.).getPropertyValue('color');
08.
09.
10.
11.// Get the content value of .element:before
12.
13.var content = window.getComputedStyle(
14.
15.document.querySelector('.element'), ':before'
16.
17.).getPropertyValue('content');看見了嗎，我能訪問偽元素裡的content屬性值。如果你想建立一個動態的，風格別緻的網站，這是一種非常有用的技術！
classList API
很多的JavaScript工具庫裡都有addClass，removeClass和toggleClass等方法。為了對老式瀏覽器的相容，這些類庫採用的方法都是先搜尋元素的className，追加和刪除這個類，然後更新className。其實有一個新型的API提供了新增，刪除和反轉CSS類屬性的方法，叫做classList：
01.myDiv.classList.add('myCssClass'); // Adds a class
02.
03.
04.
05.myDiv.classList.remove('myCssClass'); // Removes a class
06.
07.
08.
09.myDiv.classList.toggle('myCssClass'); // Toggles a class大多數的瀏覽器裡很早就實現了classListAPI，而且最終IE10裡也實現了它。
直接對樣式表進行新增和刪除樣式規則
我們都非常熟悉使用element.style.propertyName來修改樣式，使用JavaScript能幫助我們做到這些，但你知道如何新增或修一個現有的CSS樣式規則嗎？其實非常的簡單。
01.function addCSSRule(sheet, selector, rules, index) {
02.
03.if(sheet.insertRule) {
04.
05.sheet.insertRule(selector + "{" + rules + "}", index);
06.
07.}
08.
09.else {
10.
11.sheet.addRule(selector, rules, index);
12.
13.}
14.
15.}
16.
17.
18.
19.// Use it!
20.
21.addCSSRule(document.styleSheets[0], "header", "float: left");這種方法通常是用來建立一個新的樣式規則，但如果你想修改一個現有的規則，也可以這樣做。
載入CSS檔案
延遲載入圖片、JSON、指令碼等是用來加快頁面顯示速度的好方法。我們可以使用curl.js等這樣JavaScript載入器來延遲載入這些外部資源，可你知道CSS樣式表也可以延遲載入嗎，而且在載入成功後回撥函式會給予通知。
01.curl(
02.
03.[
04.
05."namespace/MyWidget",
06.
07."css!namespace/resources/MyWidget.css"
08.
09.],
10.
11.function(MyWidget) {
12.
13.// 你可以對MyWidget進行操作
14.
15.// 這裡沒有對這個CSS檔案引用，因為不需要;
16.
17.// 我們只需要它已經載入到頁面上了
18.
19.}
20.
21.});本網站使用的PrismJS語法高亮指令碼就是延遲載入的。當所有的資源都載入後，回撥函式就會觸發，我可在回撥函式里載入它。非常有用！
CSS滑鼠指標事件
CSS滑鼠指標事件pointer-events屬性非常的有趣，它的功效非常像JavaScript，當你把這個屬性設定為none時，它能有效的阻止禁止這個元素，你也許會說“這又如何？”，但事實上，它是禁止了這個元素上的任何JavaScript事件或回撥函式！
.disabled { pointer-events: none; }點選這個元素，你會發現任何你放置在這個元素上的監聽器都不會觸發任何事件。一個神奇的功能，真的——你不在需要為了防止某個事件會被觸發而去檢查某個css類是否存在。
就是這5給你也許還沒有發現的CSS和JavaScript互動的方法。你還有新的發現嗎？分享出來！
(英文：5 Ways that CSS and JavaScript Interact That You May Not Know About.)
評論(1)