5種你未必知道的JavaScript和CSS交互的方法

隨著瀏覽器不斷的升級改進，CSS和JavaScript之間的界限越來越模糊。本來它們是負責著完全不同的功能，但最終，它們都屬于網頁前端技術，它們需要相互密切的合作。泰州網站建設宇易網絡中都有(you).js文件和(he).css文件，但這并不意味著CSS和(he)js是獨立不能交互(hu)的。下面要講的這五(wu)種JavaScript和(he)CSS共同合作的方法你(ni)也(ye)許未必知道(dao)！

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

大家都知道如何通過(guo)一個元素(su)的(de)(de)style屬性獲取(qu)它的(de)(de)CSS樣式值，但能獲取(qu)偽元素(su)(pseudo-element)的(de)(de)屬性值嗎？可(ke)(ke)以(yi)的(de)(de)，使用JavaScript也(ye)可(ke)(ke)以(yi)訪(fang)問頁面中的(de)(de)偽元素(su)。

// 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'); 

看見了嗎，我能訪(fang)問偽元(yuan)素里(li)的(de)content屬性值。如果你想創(chuang)建(jian)一(yi)個動態的(de)，風格(ge)別致的(de)網站，這是一(yi)種非(fei)常有用(yong)的(de)技術！

classList API

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

myDiv.classList.add('myCssClass'); // Adds a class  
myDiv.classList.remove('myCssClass'); // Removes a class  
myDiv.classList.toggle('myCssClass'); // Toggles a class 

大多數(shu)的瀏覽器里很早就實現了classListAPI，而且最終IE10里也實現了它。

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

我(wo)(wo)們都非常熟悉使(shi)(shi)用(yong)element.style.propertyName來修改樣式，使(shi)(shi)用(yong)JavaScript能幫(bang)助我(wo)(wo)們做到這些，但你知道如何新增或修一個(ge)現有的CSS樣式規則(ze)嗎？其實(shi)非常的簡單。

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"); 

這(zhe)種方法通常是用(yong)來創建一個新的(de)樣(yang)式規(gui)則，但如果你想(xiang)修改一個現有的(de)規(gui)則，也可(ke)以這(zhe)樣(yang)做。

加載CSS文件

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

curl(  
[  
"namespace/MyWidget",  
"css!namespace/resources/MyWidget.css" 
],   
function(MyWidget) {  
// 你可以對MyWidget進行操作  
// 這里沒有對這個CSS文件引用，因為不需要;  
// 我們只需要它已經加載到頁面上了  
}  
}); 

當所(suo)有(you)(you)的資源都加(jia)載后(hou)，回調(diao)函(han)數(shu)就會(hui)觸發，我可在回調(diao)函(han)數(shu)里加(jia)載它。非常(chang)有(you)(you)用！

CSS鼠標指針事件

CSS鼠標指針事件pointer-events屬性(xing)非常的(de)(de)有趣，它(ta)的(de)(de)功(gong)效非常像(xiang)JavaScript，當你(ni)把這(zhe)個屬性(xing)設置為none時，它(ta)能有效的(de)(de)阻止禁(jin)止這(zhe)個元素(su)，你(ni)也許會說“這(zhe)又如何？”，但(dan)事實上，它(ta)是禁(jin)止了這(zhe)個元素(su)上的(de)(de)任何JavaScript事件或回調(diao)函數！

.disabled { pointer-events: none; } 

點擊這(zhe)(zhe)個(ge)元素，你會(hui)(hui)發現任何你放置(zhi)在(zai)這(zhe)(zhe)個(ge)元素上的(de)監(jian)聽器都不會(hui)(hui)觸發任何事件(jian)。一個(ge)神奇的(de)功能，真的(de)——你不在(zai)需要為了防止(zhi)某個(ge)事件(jian)會(hui)(hui)被(bei)觸發而去檢查某個(ge)css類(lei)是否存(cun)在(zai)。

就是這5給你也許還(huan)沒有發(fa)現(xian)的CSS和(he)JavaScript交互的方法。你還(huan)有新的發(fa)現(xian)嗎？分享出來！