《PHP實(shí)戰(zhàn)：使用JavaScript創(chuàng)建新樣式表和新樣式規(guī)則》要點(diǎn)：
本文介紹了PHP實(shí)戰(zhàn)：使用JavaScript創(chuàng)建新樣式表和新樣式規(guī)則，希望對您有用。如果有疑問，可以聯(lián)系我們。

如今的這個(gè)年代,流行在Web頁面上使用了大量的JavaScript,我們需要尋找各種方式來優(yōu)化它們,使它們更快.我們使用事件委托來讓事件監(jiān)聽器更有效率,使用降頻技術(shù)來限定某些方法的使用次數(shù),使用各種JavaScript加載器來動(dòng)態(tài)加載我們需要的資源,等等.另外一種讓頁面更高效、更敏捷的方法是動(dòng)態(tài)的添加或移除樣式表里的樣式,而不需要去查詢DOM元素,對每個(gè)元素做樣式調(diào)整.下面我們就來看看如何使用這種技術(shù)!PHP教程

捕獲樣式表PHP教程

你的頁面上可能引用了不只一個(gè)的樣式文件,你可以選擇其中的一個(gè).如果你指定了某個(gè),你可以在HTML頁面中的LINK 和 STYLE標(biāo)簽上加入ID來進(jìn)行區(qū)別,獲取CSSStyleSheet對象,它存放在document.styleSheets對象里.PHP教程

var sheets = document.styleSheets; // 返回一個(gè)StyleSheetList數(shù)組
/*
返回： 
StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, 5: CSSStyleSheet, 6: CSSStyleSheet, 7: CSSStyleSheet, 8: CSSStyleSheet, 9: CSSStyleSheet, 10: CSSStyleSheet, 11: CSSStyleSheet, 12: CSSStyleSheet, 13: CSSStyleSheet, 14: CSSStyleSheet, 15: CSSStyleSheet, length: 16, item: function}
*/
// 找到你想要修改的樣式表
var sheet = document.styleSheets[0];

一個(gè)重要的需要注意的事情是樣式表的media屬性――如果你不小心,當(dāng)想往屏幕顯示使用的樣式表里做修改操作時(shí),你也許會(huì)錯(cuò)誤的修改了用于打印(print)時(shí)使用的樣式表.CSSStyleSheet對象里有各種屬性信息,需要時(shí)你可以從中獲取.PHP教程

// Get info about the first stylesheet
console.log(document.styleSheets[0]);
/*
返回結(jié)果： 
CSSStyleSheet
 cssRules: CSSRuleList
 disabled: false
 href: "http://davidwalsh.name/somesheet.css"
 media: MediaList
 ownerNode: link
 ownerRule: null
 parentStyleSheet: null
 rules: CSSRuleList
 title: null
 type: "text/css"
*/
// Get the media type
console.log(document.styleSheets[0].media.mediaText)
/*
Returns:
 "all" or "print" or whichever media is used for this stylesheet
*/

有很多方法都可以讓你捕獲一個(gè)樣式表,往里面添加新樣式規(guī)則.PHP教程

創(chuàng)建一個(gè)新的樣式表PHP教程

大多數(shù)時(shí)候,最好的方法是創(chuàng)建一個(gè)新的STYLE元素,動(dòng)態(tài)的往里面添加規(guī)則.非常簡單：PHP教程

var sheet = (function() {
 // Create the <style> tag
 var style = document.createElement("style");
 // 如果你愿意的話,可以添加media屬性 (或 media query) 
 // style.setAttribute("media", "screen")
 // style.setAttribute("media", "@media only screen and (max-width : 1024px)")
 // WebKit 補(bǔ)丁 
 style.appendChild(document.createTextNode(""));
 // Add the <style> element to the page
 document.head.appendChild(style);
 return style.sheet;
})();

不幸的是,WebKit類型的瀏覽器需求做一點(diǎn)點(diǎn)小修改,才能讓上面的代碼正確的運(yùn)行,但不管怎樣,我們獲得了想要的sheet.PHP教程

添加樣式規(guī)則 C 標(biāo)準(zhǔn)的addRule方法PHP教程

CSSStyleSheet對象里有一個(gè)addRule方法,它可以接受3個(gè)參數(shù)：選擇器、樣式規(guī)則的CSS代碼和一個(gè)整數(shù),這個(gè)整數(shù)用來指示樣式表的位置(相對于同樣的選擇器)：PHP教程

sheet.addRule("#myList li", "float: left; background: red !important;", 1);
位置缺省值為-1,表示放在最后.為了進(jìn)行額外的控制,或偷懶的寫法,你可以在規(guī)則里添加!important來消除位置引起的問題.調(diào)用addRule會(huì)返回-1――它什么都不表示.PHP教程

你會(huì)發(fā)現(xiàn),這種技術(shù)的優(yōu)勢在于,它可以動(dòng)態(tài)的往頁面上添加樣式規(guī)則,并應(yīng)用它們；你不必對每個(gè)元素進(jìn)行操作,瀏覽器會(huì)自動(dòng)應(yīng)用這些規(guī)則.高效吧!PHP教程

新增樣式規(guī)則PHP教程

CSSStyleSheet對象里還有一個(gè)insertRule方法,但在早期的IE里是沒有這個(gè)方法的.insertRule方法把a(bǔ)ddRule方法的前兩個(gè)參數(shù)混合到了一起：PHP教程

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
這個(gè)方法看起來很丑陋,但無疑也是非常有用的.PHP教程

安全的應(yīng)用樣式規(guī)則PHP教程

因?yàn)椴⒉皇撬械臑g覽器都支持insertRule,最好我們做一些封裝來確保代碼的有效執(zhí)行.下面就是一個(gè)很簡單的封裝方法：PHP教程

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

這個(gè)方法可以應(yīng)對各種情況.如果你想把這個(gè)方法里的代碼單獨(dú)拿出來使用,最好用try{}catch(e){}把它們包起來.PHP教程

為媒體查詢(Media Queries)增加樣式規(guī)則PHP教程

有兩個(gè)方法可以為特定的媒體查詢增加樣式規(guī)則.第一種是通過標(biāo)準(zhǔn)的insertRule方法：PHP教程

sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");
因?yàn)槔鲜降腎E不支持insertRule,我們可以使用另外一種方法,就是創(chuàng)建一個(gè)STYLE元素,賦予它正確的media屬性,然后往里面添加新的樣式規(guī)則.這種方式會(huì)增加額外的STYLE元素,但十分的簡單.PHP教程

我認(rèn)為動(dòng)態(tài)的往樣式表里添加樣式規(guī)則是一種十分高效而且簡單的技術(shù).記住在你的下一個(gè)應(yīng)用里試一下這種技術(shù),它會(huì)省了你很多功夫.PHP教程

(英文：Add Rules to Stylesheets with JavaScript.)PHP教程

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持維易PHP.PHP教程

轉(zhuǎn)載請注明本頁網(wǎng)址：
http://www.snjht.com/jiaocheng/6133.html