你所不知道關于JavaScript和CSS交互的5種方法學習

今天就跟大家聊聊有關你所不知道關于JavaScript和CSS交互的5種方法學習，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

創(chuàng)新互聯公司專注于儋州網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。熱誠為您提供儋州營銷型網站建設，儋州網站制作、儋州網頁設計、儋州網站官網定制、微信小程序開發(fā)服務，打造儋州網絡公司原創(chuàng)品牌,更為您提供儋州網站排名全網營銷落地服務。

隨著瀏覽器不斷的升級改進，CSS和JavaScript之間的界限越來越模糊。本來它們是負責著完全不同的功能，但最終，它們都屬于網頁前端技術，它們需要相互密切的合作。我們的網頁中都有.js文件和.css文件，但這并不意味著CSS和js是獨立不能交互的。

用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屬性值。如果你想創(chuàng)建一個動態(tài)的，風格別致的網站，這是一種非常有用的技術！

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里也實現了它。

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

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

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)建一個新的樣式規(guī)則，但如果你想修改一個現有的規(guī)則，也可以這樣做。

加載CSS文件

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

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

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

CSS鼠標指針事件

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

.disabled { pointer-events: none; }

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

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

看完上述內容，你們對你所不知道關于JavaScript和CSS交互的5種方法學習有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯行業(yè)資訊頻道，感謝大家的支持。

當前題目：你所不知道關于JavaScript和CSS交互的5種方法學習
文章位置：http://bm7419.com/article2/jjcdic.html

成都網站建設公司_創(chuàng)新互聯，為您提供用戶體驗、自適應網站、企業(yè)建站、外貿網站建設、網站設計公司、關鍵詞優(yōu)化

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容