// Get the color value of .element:before

var color = window.getComputedStyle(

document.querySelector('.element'), ':before'

).getPropertyValue('color');

// Get the content value of .element:before

var content = window.getComputedStyle(

document.querySelector('.element'), ':before'

).getPropertyValue('content');

看見了嗎，我能訪問偽元素里的content屬性值。如果你想創(chuàng)建一個(gè)動態(tài)的，風(fēng)格別致的網(wǎng)站，這是一種非常有用的技術(shù)！

classList API

很多的JavaScript工具庫里都有addClass，removeClass和toggleClass等方法。為了對老式瀏覽器的兼容，這些類庫采用的方法都是先搜索元素的className，追加和刪除這個(gè)類，然后更新className。其實(shí)有一個(gè)新型的API提供了添加，刪除和反轉(zhuǎn)CSS類屬性的方法，叫做classList：

復(fù)制代碼代碼如下:

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

大多數(shù)的瀏覽器里很早就實(shí)現(xiàn)了classListAPI，而且最終IE10里也實(shí)現(xiàn)了它。

直接對樣式表進(jìn)行添加和刪除樣式規(guī)則

我們都非常熟悉使用element.style.propertyName來修改樣式，使用JavaScript能幫助我們做到這些，但你知道如何新增或修一個(gè)現(xiàn)有的CSS樣式規(guī)則嗎？其實(shí)非常的簡單。

復(fù)制代碼代碼如下:

function addCSSRule(sheet, selector, rules, index) {

if(sheet.insertRule) {

sheet.insertRule(selector + "{" + rules + "}", index);

}

else {

sheet.addRule(selector, rules, index);

}

}

// Use it!

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

這種方法通常是用來創(chuàng)建一個(gè)新的樣式規(guī)則，但如果你想修改一個(gè)現(xiàn)有的規(guī)則，也可以這樣做。

加載CSS文件

延遲加載圖片、JSON、腳本等是用來加快頁面顯示速度的好方法。我們可以使用curl.js等這樣JavaScript加載器來延遲加載這些外部資源，可你知道CSS樣式表也可以延遲加載嗎，而且在加載成功后回調(diào)函數(shù)會給予通知。

復(fù)制代碼代碼如下:

curl(

[

"namespace/MyWidget",

"css!namespace/resources/MyWidget.css"

], 

function(MyWidget) {

// 你可以對MyWidget進(jìn)行操作

// 這里沒有對這個(gè)CSS文件引用，因?yàn)椴恍枰?

// 我們只需要它已經(jīng)加載到頁面上了

}

});

本網(wǎng)站使用的PrismJS語法高亮腳本就是延遲加載的。當(dāng)所有的資源都加載后，回調(diào)函數(shù)就會觸發(fā)，我可在回調(diào)函數(shù)里加載它。非常有用！

CSS鼠標(biāo)指針事件

CSS鼠標(biāo)指針事件pointer-events屬性非常的有趣，它的功效非常像JavaScript，當(dāng)你把這個(gè)屬性設(shè)置為none時(shí)，它能有效的阻止禁止這個(gè)元素，你也許會說“這又如何？”，但事實(shí)上，它是禁止了這個(gè)元素上的任何JavaScript事件或回調(diào)函數(shù)！

復(fù)制代碼代碼如下:

.disabled { pointer-events: none; }

點(diǎn)擊這個(gè)元素，你會發(fā)現(xiàn)任何你放置在這個(gè)元素上的監(jiān)聽器都不會觸發(fā)任何事件。一個(gè)神奇的功能，真的——你不在需要為了防止某個(gè)事件會被觸發(fā)而去檢查某個(gè)css類是否存在。

以上就是個(gè)人總結(jié)的5種javascript和CSS進(jìn)行交互的方法，大家如果有更好的，請告之，本文將持續(xù)更新

您可能感興趣的文章: