JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建CSS樣式規(guī)則方案
現(xiàn)在Web應(yīng)用中有大量的JavaScript代碼,而我們也一直在追尋各種使他們更快的解決方案。
1.我們通過(guò) 事件代理(event delegation) 讓事件監(jiān)聽(tīng)更高效,
2.我們利用 函數(shù)降頻技術(shù)(function debouncing) 來(lái)限制一段時(shí)間內(nèi)給定方法被調(diào)用的次數(shù),請(qǐng)參考:如何防止事件函數(shù)的高頻觸發(fā)(中文翻譯)
3.我們使用 JavaScript加載器 來(lái)加載我們確實(shí)需要的那部分資源,等等。
還有一種方式,可以讓我們的頁(yè)面更加的快速和高效.那就是直接通過(guò)JS動(dòng)態(tài)地添加和刪除樣式表中的某些樣式,用來(lái)取代不斷地查詢(xún)DOM元素,并應(yīng)用各種樣式。下面是它的工作原理。
獲取樣式表
你可以選擇任意的樣式表來(lái)添加樣式規(guī)則。如果你有確定的樣式表,則可以在HTML頁(yè)面中給 <link> 或 <style> 標(biāo)簽添加ID屬性,然后直接通過(guò)這個(gè)DOM元素的 sheet 屬性就可以取得 CSSStyleSheet 對(duì)象。樣式表也可以通過(guò) document.styleSheets 遍歷到:
// 返回一個(gè)類(lèi)似數(shù)組的(Array-like)樣式列表 StyleSheetList
var sheets = document.styleSheets;
/*
返回值類(lèi)似下面這樣:
StyleSheetList
{
0: CSSStyleSheet,
1: CSSStyleSheet,
2: CSSStyleSheet,
3: CSSStyleSheet,
4: CSSStyleSheet,
length: 5,
item: function
}
*/
// 獲取第一個(gè)sheet, 先不管 media屬性
var sheet = document.styleSheets[0];
需要特別注意的是樣式表的media屬性 —— 當(dāng)你想在屏幕上顯示的時(shí)候,你肯定不能把CSS規(guī)則加到打印樣式表中。你可以仔細(xì)的看一下CSSStyleSheet對(duì)象的屬性信息:
// 控制臺(tái)輸出第一個(gè)樣式表的信息
console.log(document.styleSheets[0]);
/*
返回值:
CSSStyleSheet
cssRules: CSSRuleList[對(duì)象]
disabled: false
href: "
media: MediaList[對(duì)象]
ownerNode: link[對(duì)象]
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList[對(duì)象]
title: null
type: "text/css"
*/
// 獲取媒體類(lèi)型(media type)
console.log(document.styleSheets[0].media.mediaText)
/*
返回值可能是:
"all" 或者 "print" 或者是其他應(yīng)用到此樣式表的 media
*/
在各種情況下,你肯定都有辦法來(lái)獲取到要添加規(guī)則的樣式表。
創(chuàng)建一個(gè)新樣式表
在許多情況下,最好的方法可能是創(chuàng)建一個(gè)新的 <style> 元素來(lái)存放這些動(dòng)態(tài)規(guī)則。這也很簡(jiǎn)單:
var sheet = (function() {
// 創(chuàng)建 <style> 標(biāo)簽
var style = document.createElement("style");
// 可以添加一個(gè)媒體(/媒體查詢(xún),media query)屬性
// style.setAttribute("media", "screen")
// style.setAttribute("media", "only screen and (max-width : 1024px)")
// 對(duì)WebKit hack :(
style.appendChild(document.createTextNode(""));
// 將 <style> 元素加到頁(yè)面中
document.head.appendChild(style);
return style.sheet;
})();
悲劇的是WebKit需要一點(diǎn)hack手段才能正確創(chuàng)建,但我們只需要關(guān)心這個(gè)sheet。
插入規(guī)則
在早期版本的IE中 Stylesheets 的 insertRule方法并不可用,雖然現(xiàn)在這是規(guī)則注入的標(biāo)準(zhǔn)。insertRule 方法需要編寫(xiě)整個(gè)CSS規(guī)則,和在樣式表中是一樣的寫(xiě)法:
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
這個(gè)JavaScript API方法雖然看起來(lái)有點(diǎn)土,但它確實(shí)就是這樣運(yùn)行的。第二個(gè)參數(shù) index 表示要插入規(guī)則的位置(索引)。這也是非常有用的,這樣你就可以插入同樣的規(guī)則/代碼,這可以讓靠后的規(guī)則生效。默認(rèn)的index是 -1 ,代表整個(gè)集合的末尾。如果想要有額外的/懶惰控制規(guī)則,你也可以添加 !important 標(biāo)記到某條規(guī)則后,以避免索引的問(wèn)題。
添加規(guī)則 —— 非標(biāo)準(zhǔn)的 addRule 方法
CSSStyleSheet 對(duì)象有一個(gè) addRule 方法,允許你注冊(cè)CSS規(guī)則到樣式表中。 addRule 方法接受三個(gè)參數(shù): 第一個(gè)參數(shù)是選擇器(selector)、第二個(gè)參數(shù)是CSS規(guī)則代碼, 第三個(gè)則是從0開(kāi)始的整數(shù)索引,表示樣式的位置(在同一個(gè)選擇器中):
sheet.addRule("#myList li", "float: left; background: red !important;", 1);
addRule方法的返回值總是 -1,所以這個(gè)值并沒(méi)有什么實(shí)際意義.
記住,這種方式的優(yōu)點(diǎn)在于,從頁(yè)面添加的元素自動(dòng)擁有了應(yīng)用于他們的樣式,也就是說(shuō)你不必將它們添加到具體的元素上,而是直接注入到頁(yè)面中。當(dāng)然效率更高!
安全應(yīng)用規(guī)則
因?yàn)椴⒉皇撬械臑g覽器都支持 insertRule 方法, 所以最好創(chuàng)建一個(gè)包裝函數(shù)來(lái)處理規(guī)則應(yīng)用。下面是一個(gè)快速的土方法:
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}
// 使用方式
addCSSRule(document.styleSheets[0], "header", "float: left");
這個(gè)工具方法應(yīng)該涵蓋了新增style規(guī)則的所有情況。如果你擔(dān)心在應(yīng)用中出錯(cuò), 那么應(yīng)該將該方法的代碼用一個(gè) try{} catch(e){} 塊包起來(lái)。
插入媒體查詢(xún)規(guī)則
媒體查詢(xún)規(guī)則的添加有兩種方式。第一個(gè)是使用標(biāo)準(zhǔn) insertRule 方法:
sheet.insertRule(
"@media only screen and (max-width : 1140px) { header { display: none; } }"
);
當(dāng)然,因?yàn)镮E老版本不支持 insertRule,所以另一種方法就是創(chuàng)建一個(gè) STYLE 元素,并指定適當(dāng)?shù)?media 屬性,然后將樣式添加到新的樣式表中。這可能需要使用多個(gè) STYLE 元素,但也是很容易的。我可能會(huì)創(chuàng)建一個(gè)對(duì)象,指定媒體查詢(xún)以及索引,并那樣創(chuàng)建/獲取他們。
動(dòng)態(tài)添加規(guī)則到樣式表是高效的手段,可能比你想象的還要簡(jiǎn)單。請(qǐng)記住這種方案,可能在你的下一個(gè)大應(yīng)用中需要使用,因?yàn)樗茉诖a和元素處理這兩方面避免你掉進(jìn)坑里。
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式示例代碼
- javascript 動(dòng)態(tài)創(chuàng)建表格
- javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法
- JavaScript動(dòng)態(tài)創(chuàng)建link標(biāo)簽到head里的方法
- JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
- javascript轉(zhuǎn)換字符串為dom對(duì)象(字符串動(dòng)態(tài)創(chuàng)建dom)
- javascript 翻頁(yè)測(cè)試頁(yè)(動(dòng)態(tài)創(chuàng)建標(biāo)簽并自動(dòng)翻頁(yè))
- JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法
- Javascript動(dòng)態(tài)創(chuàng)建div的方法
- javascript 動(dòng)態(tài)創(chuàng)建 Option選項(xiàng)
相關(guān)文章
javascript數(shù)組對(duì)象常用api函數(shù)小結(jié)(連接,插入,刪除,反轉(zhuǎn),排序等)
這篇文章主要介紹了javascript數(shù)組對(duì)象常用api函數(shù),結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)數(shù)組的連接、刪除、反轉(zhuǎn)、排序、插入等操作相關(guān)函數(shù)用法,需要的朋友可以參考下2016-09-09JavaScript使用delete刪除數(shù)組元素用法示例【數(shù)組長(zhǎng)度不變】
這篇文章主要介紹了JavaScript使用delete刪除數(shù)組元素用法,結(jié)合實(shí)例形式分析了delete刪除數(shù)組元素的具體用法與注意事項(xiàng),需要的朋友可以參考下2017-01-01簡(jiǎn)單的加密css地址防止別人下載你的CSS文件的方法
阻止別人不那么容易下載或查看到你的CSS文件,高手可能阻止不了,不過(guò)新手們一時(shí)會(huì)不知所措,費(fèi)一番周折了2009-10-10使用JavaScript實(shí)現(xiàn)Java的List功能(實(shí)例講解)
使用JavaScript實(shí)現(xiàn)Java的List功能(實(shí)例講解)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JS定義網(wǎng)頁(yè)表單提交(submit)的方法
這篇文章主要介紹了JS定義網(wǎng)頁(yè)表單提交(submit)的方法,實(shí)例分析了javascript實(shí)現(xiàn)表單提交執(zhí)行自定義函數(shù)的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化的動(dòng)畫(huà)
最近在工作中遇到一個(gè)需要,需要將數(shù)字實(shí)現(xiàn)遞增的動(dòng)態(tài)顯示,從網(wǎng)上找了相關(guān)的資料發(fā)現(xiàn)利用原生JS與jQuery都可以實(shí)現(xiàn),suoyi8下面這篇文章主要給大家介紹了利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下。2017-02-02