JavaScript和CSS的互動方法
CSS和JavaScript本來負責著完全不同的功能,但隨著瀏覽器不斷的升級改進,CSS和JavaScript之間的界限越來越模糊。它們都屬於網頁前端技術,它們需要相互密切的合作。我們的網頁中都有.js檔案和.css檔案,但這並不意味著CSS和js是獨立不能互動的。下面要講的是五種JavaScript和CSS共同合作的方法。
一、用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:
myDiv.classList.add('myCssClass'); // Addsa class
myDiv.classList.remove('myCssClass'); //Removes a class
myDiv.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類是否存在。
本文為Anyforweb技術分享部落格,需要了解網站建設及更多web應用相關資訊,請訪問anyforweb.com。
相關文章
- 5種JavaScript和CSS互動的方法JavaScriptCSS
- 5種你未必知道的JavaScript和CSS互動的方法JavaScriptCSS
- JavaScript和Objective-C互動的那些事JavaScriptObject
- Android中Java和JavaScript互動AndroidJavaScript
- android 的webView載入h5,和h5的互動(java和JavaScript的互動)AndroidWebViewH5JavaScript
- Android Webview Java和Javascript安全互動AndroidWebViewJavaScript
- HTML5 和 CSS3的新互動特性HTMLCSSS3
- HTML5和CSS3中的互動新特性HTMLCSSS3
- WPF和js互動 呼叫窗體中的方法JS
- JavaScript 和 CSS 常用工具方法封裝JavaScriptCSS封裝
- javascript 動態修改css樣式方法彙總(四種方法)JavaScriptCSS
- iOS開發-javaScript互動iOSJavaScript
- 你可能不知道的5種 CSS 和 JS 的互動方式CSSJS
- CSS 和 JavaScript 常用工具方法封裝教程!CSSJavaScript封裝
- CSS如何清除浮動的方法和優缺點CSS
- WPF和js互動 WebBrowser資料互動JSWeb
- 6個提高互動體驗的JavaScript庫JavaScript
- JavaScript的方法和技巧JavaScript
- Cordova JS OC互動方法JS
- Android 原生 WebView 與 JavaScript 互動AndroidWebViewJavaScript
- JavaScript入門篇--請和我互動JavaScript
- AndroidWebView與JavaScript程式碼互動AndroidWebViewJavaScript
- C# 與 javascript 簡單互動C#JavaScript
- CSS 實現搜尋相關互動CSS
- CSS神奇的卡片懸停互動效果CSS
- CSS-實戰-互動式圖片CSS
- JS 與 OC 互動的三種方法JS
- JavaScript 字串與json物件互轉的幾種方法JavaScript字串JSON物件
- 解耦 HTML、CSS 和 JavaScript解耦HTMLCSSJavaScript
- 解耦HTML、CSS和JavaScript解耦HTMLCSSJavaScript
- 我還會JavaScript和CSSJavaScriptCSS
- nginx 和 PHP-fpm 的互動NginxPHP
- 隨機與和未知的互動隨機
- django和apache互動的wsgi分析DjangoApache
- Activity和fragment是如何互動的Fragment
- 動態載入css方法實現和深入解析CSS
- iOS高階-WebView & JavaScript互動(附DEMO)iOSWebViewJavaScript
- javascript 動態修改css樣式JavaScriptCSS