- 相關(guān)推薦
JavaScript創(chuàng)建對(duì)象方法2017最新
JavaScript開(kāi)發(fā)者們與原型鏈的關(guān)系總是若即若離，糾纏不清。在JavaScript中“創(chuàng)建對(duì)象”是一個(gè)復(fù)雜的話題。這門語(yǔ)言提供了很多種創(chuàng)建對(duì)象的方式，不論新手還是老手都可能對(duì)此感到無(wú)所適從，不知道應(yīng)該選擇哪一種。不過(guò)，盡管創(chuàng)建對(duì)象的方法很多，看上去語(yǔ)法差異也很大，但實(shí)際上它們的相似性可能比你所以為的要多。本文將帶領(lǐng)你踏上一段梳理對(duì)象創(chuàng)建方法的旅程，為你揭示不同方法之間的依賴與遞進(jìn)關(guān)系。
捕獲樣式表
你的頁(yè)面上可能引用了不只一個(gè)的樣式文件，你可以選擇其中的一個(gè)。如果你指定了某個(gè)，你可以在HTML頁(yè)面中的LINK 和 STYLE標(biāo)簽上加入ID來(lái)進(jìn)行區(qū)別，獲取CSSStyleSheet對(duì)象，它存放在document.styleSheets對(duì)象里。
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對(duì)象里有各種屬性信息，需要時(shí)你可以從中獲取。
// Get info about the first stylesheetconsole.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 typeconsole.log(document.styleSheets[0].media.mediaText)/*
Returns:
"all" or "print" or whichever media is used for this stylesheet
*/
有很多方法都可以讓你捕獲一個(gè)樣式表，往里面添加新樣式規(guī)則。
創(chuàng)建一個(gè)新的樣式表
大多數(shù)時(shí)候，最好的方法是創(chuàng)建一個(gè)新的STYLE元素，動(dòng)態(tài)的往里面添加規(guī)則。非常簡(jiǎn)單：
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。
添加樣式規(guī)則 – 標(biāo)準(zhǔn)的addRule方法
CSSStyleSheet對(duì)象里有一個(gè)addRule方法，它可以接受3個(gè)參數(shù)：選擇器、樣式規(guī)則的CSS代碼和一個(gè)整數(shù)，這個(gè)整數(shù)用來(lái)指示樣式表的位置(相對(duì)于同樣的選擇器)：
sheet.addRule("#myList li", "float: left; background: red !important;", 1);
位置缺省值為-1，表示放在最后。為了進(jìn)行額外的控制，或偷懶的寫法，你可以在規(guī)則里添加!important來(lái)消除位置引起的問(wèn)題。調(diào)用addRule會(huì)返回-1——它什么都不表示。
你會(huì)發(fā)現(xiàn)，這種技術(shù)的優(yōu)勢(shì)在于，它可以動(dòng)態(tài)的往頁(yè)面上添加樣式規(guī)則，并應(yīng)用它們；你不必對(duì)每個(gè)元素進(jìn)行操作，瀏覽器會(huì)自動(dòng)應(yīng)用這些規(guī)則。高效吧！
新增樣式規(guī)則
CSSStyleSheet對(duì)象里還有一個(gè)insertRule方法，但在早期的IE里是沒(méi)有這個(gè)方法的。insertRule方法把a(bǔ)ddRule方法的前兩個(gè)參數(shù)混合到了一起：
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
這個(gè)方法看起來(lái)很丑陋，但無(wú)疑也是非常有用的。
安全的應(yīng)用樣式規(guī)則
因?yàn)椴⒉皇撬械臑g覽器都支持insertRule，最好我們做一些封裝來(lái)確保代碼的有效執(zhí)行。下面就是一個(gè)很簡(jiǎn)單的封裝方法：
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)對(duì)各種情況。如果你想把這個(gè)方法里的代碼單獨(dú)拿出來(lái)使用，最好用try{}catch(e){}把它們包起來(lái)。
為媒體查詢(Media Queries)增加樣式規(guī)則
有兩個(gè)方法可以為特定的媒體查詢?cè)黾訕邮揭?guī)則。第一種是通過(guò)標(biāo)準(zhǔn)的insertRule方法：
sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");
因?yàn)槔鲜降腎E不支持insertRule，我們可以使用另外一種方法，就是創(chuàng)建一個(gè)STYLE元素，賦予它正確的media屬性，然后往里面添加新的樣式規(guī)則。這種方式會(huì)增加額外的STYLE元素，但十分的簡(jiǎn)單。
我認(rèn)為動(dòng)態(tài)的往樣式表里添加樣式規(guī)則是一種十分高效而且簡(jiǎn)單的技術(shù)。記住在你的下一個(gè)應(yīng)用里試一下這種技術(shù)，它會(huì)省了你很多功夫。
【JavaScript創(chuàng)建對(duì)象方法最新】相關(guān)文章：
javascript數(shù)據(jù)創(chuàng)建方法參考07-30
關(guān)于Javascript對(duì)象屬性方法匯總08-24
javascript中String對(duì)象的slice()方法09-27
使用ajax操作JavaScript對(duì)象的方法09-28
JavaScript中創(chuàng)建字典對(duì)象(dictionary)的實(shí)例07-31
javascript設(shè)置創(chuàng)建動(dòng)態(tài)表格的方法09-19
理解Javascript對(duì)象08-22
JavaScript常用對(duì)象的方法和屬性小結(jié)講解08-22