JavaScript和CSS互動的5種方法的學習

隨著瀏覽器不斷的升級改進，CSS和JavaScript之間的界線越來越模糊。本來它們是負責著完全不同的功能，但最終，它們都屬於網頁前端技術，它們需要相互密切的合作。我們的網頁中都有.js檔案和.css文件，但這並不意味著CSS和js是獨立不能互動的。下面要講的這五種JavaScript和CSS共同合作的方法你也許未必知道！

相關學習推薦：javascript影片教學

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

大家都知道如何透過一個元素的style屬性取得它的CSS樣式值，但能取得偽元素(pseudo-element)的屬性值嗎？可以的，使用JavaScript也可以存取頁面中的偽元素。

// 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屬性值。如果你想創建一個動態的，風格別緻的網站，這是一種非常有用的技術！

classList API

很多的JavaScript工具庫裡都有addClass，removeClass和toggleClass等方法。為了對老式瀏覽器的相容，這些類別庫所採用的方法都是先搜尋元素的className，追加並刪除這個類，然後更新className。其實有一個新型的API提供了添加，刪除和反轉CSS類屬性的方法，叫做classList：

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

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

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

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

直接對樣式表進行新增和刪除樣式規則

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

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

這種方法通常是用來建立一個新的樣式規則，但如果你想修改一個現有的規則，也可以這樣做。

載入CSS檔案

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

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// 你可以对MyWidget进行操作
		// 这里没有对这个CSS文件引用，因为不需要;
		// 我们只需要它已经加载到页面上了
	}
});

本網站使用的PrismJS語法高亮腳本就是延遲載入的。當所有的資源都載入後，回呼函數就會觸發，我可在回呼函數裡載入它。非常有用！

CSS滑鼠指標事件

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

.disabled { pointer-events: none; }

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

就是這5給你也許還沒發現的CSS和JavaScript互動的方法。你還有新的發現嗎？分享出來！

以上是JavaScript和CSS互動的5種方法的學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！