ʹÓÃJavaScript´´½¨ÐÂÑùʽ±íºÍÐÂÑùʽ¹æÔò

Èç½ñµÄÕa¸oÄe´u£¬Á÷ÐÐÔÚWebÒ³ÃaeÉÏʹÓÃÁË´oÁ¿µÄJavaScript£¬ÎÒÃÇÐeҪѰÕÒ¸÷ÖֽʽÀ´ÓÅ»¯ËuÃÇ£¬Ê¹ËuÃǸu¿i¡£ÎÒÃÇʹÓÃʼþίÍÐÀ´ÈÃʼþ¼aÌýÆ÷¸uÓÐЧÂÊ£¬Ê¹ÓýµÆµ¼¼ÊoÀ´ÏÞ¶¨Ä³Ð(C)½¨µÄʹÓôÎÊý£¬Ê¹Óø÷ÖÖJavaScript¼ÓÔØÆ÷À´¶¯Ì¬¼ÓÔØÎÒÃÇÐeÒªµÄ×ÊÔ´£¬µÈµÈ¡£ÁiÍaÒ»ÖÖÈÃÒ³Ãae¸u¸ßЧ¡¢¸uÃo½ÝµÄ½*¨ÊǶ¯Ì¬µÄÌi¼Ó»oÒƳýÑuʽ±iÀiµÄÑuʽ£¬¶ø²»ÐeҪȥ²eѯDOMÔªËØ£¬¶Ôÿ¸oÔªËØ×oÑuʽµ÷Õu¡£ÏÂÃaeÎÒÃǾÍÀ´¿´¿´ÈçºÎʹÓÃÕaÖÖ¼¼Êo£¡

²¶»ñÑuʽ±i

ÄaµÄÒ³ÃaeÉÏ¿ÉÄÜÒýÓÃÁ˲»Ö»Ò»¸oµÄÑuʽÎļþ£¬Äa¿ÉÒÔÑ¡ÔñÆaÖеÄÒ»¸o¡£Èç¹uÄaÖ¸¶¨ÁËij¸o£¬Äa¿ÉÒÔÔÚHTMLÒ³ÃaeÖеÄLINK ºÍ STYLE±eÇ(C)ÉϼÓÈeIDÀ´½øÐÐÇø±ð£¬»ñÈ¡CSSStyleSheet¶ÔÏo£¬Ëu´ae*ÅÔÚdocument.styleSheets¶ÔÏoÀi¡£

    var sheets = document.styleSheets; // *µ»ØÒ»¸oStyleSheetListÊý×e

    /*
    *µ»Ø£º 

    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}
    */

    // ÕÒµ½ÄaÏeÒªÐ޸ĵÄÑuʽ±i
    var sheet = document.styleSheets[0];

Ò»¸oÖØÒªµÄÐeҪעÒaµÄÊÂÇeÊÇÑuʽ±iµÄmediaÊoÐÔ¡ª¡ªÈç¹uÄa²»Ð¡ÐÄ£¬µ±ÏeÍuÆÁÄ»ÏÔʾʹÓõÄÑuʽ±iÀi×oÐ޸IJÙ×÷ʱ£¬ÄaÒ²Ði»a´iÎoµÄÐÞ¸ÄÁËÓÃÓÚ´oÓ¡(print)ʱʹÓõÄÑuʽ±i¡£CSSStyleSheet¶ÔÏoÀiÓи÷ÖÖÊoÐÔÐÅÏ¢£¬ÐeҪʱÄa¿ÉÒÔ´ÓÖлñÈ¡¡£

    // Get info about the first stylesheet
    console.log(document.styleSheets[0]);

    /*
    *µ»Ø½a¹u£º 

    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
    */

Óкܶa½¨¶¼¿ÉÒÔÈÃÄa²¶»ñÒ»¸oÑuʽ±i£¬ÍuÀiÃaeÌi¼ÓÐÂÑuʽ¹aeÔo¡£

´´½¨Ò»¸oеÄÑuʽ±i

´o¶aÊýʱºo£¬×iºÃµÄ½¨ÊÇ´´½¨Ò»¸oеÄSTYLEÔªËØ£¬¶¯Ì¬µÄÍuÀiÃaeÌi¼Ó¹aeÔo¡£*dz£¼oµ¥£º

    var sheet = (function() {
     // Create the <style> tag
     var style = document.createElement("style");

     // Èç¹uÄaÔ¸ÒaµÄ»°£¬¿ÉÒÔÌi¼ÓmediaÊoÐÔ (»o media query) 
     // style.setAttribute("media", "screen")
     // style.setAttribute("media", "@media only screen and (max-width : 1024px)")

     // WebKit ²¹¶¡ 
     style.appendChild(document.createTextNode(""));

     // Add the <style> element to the page
     document.head.appendChild(style);

     return style.sheet;
    })();

²»ÐÒµÄÊÇ£¬WebKitÀaÐ͵Äa¯ÀÀÆ÷ÐeÇo×oÒ»µaµaСÐ޸ģ¬²ÅÄÜÈÃÉÏÃaeµÄ´uÂeÕýÈ*µÄÔËÐУ¬µ«²»¹ÜÔoÑu£¬ÎÒÃÇ»ñµÃÁËÏeÒªµÄsheet¡£

Ìi¼ÓÑuʽ¹aeÔo ¨C ±e×¼µÄaddRule½¨

CSSStyleSheet¶ÔÏoÀiÓÐÒ»¸oaddRule½¨£¬Ëu¿ÉÒÔ½ÓÊÜ3¸o²ÎÊý£ºÑ¡ÔñÆ÷¡¢Ñuʽ¹aeÔoµÄCSS´uÂeºÍÒ»¸oÕuÊý£¬Õa¸oÕuÊýÓÃÀ´Ö¸Ê¾Ñuʽ±iµÄλÖÃ(Ïa¶ÔÓÚͬÑuµÄÑ¡ÔñÆ÷)£º

sheet.addRule("#myList li", "float: left; background: red !important;", 1);
λÖÃȱʡֵΪ-1£¬±iʾÅÔÚ×iºo¡£ÎªÁ˽øÐжiÍaµÄ¿ØÖÆ£¬»o͵ÀÁµÄд¨£¬Äa¿ÉÒÔÔÚ¹aeÔoÀiÌi¼Ó!importantÀ´Ïu³ýλÖÃÒýÆðµÄÎÊÌa¡£µ÷ÓÃaddRule»a*µ»Ø-1¡ª¡ªËuʲô¶¼²»±iʾ¡£

Äa»a*¢ÏÖ£¬ÕaÖÖ¼¼ÊoµÄÓÅÊÆÔÚÓÚ£¬Ëu¿ÉÒÔ¶¯Ì¬µÄÍuÒ³ÃaeÉÏÌi¼ÓÑuʽ¹aeÔo£¬²¢Ó¦ÓÃËuÃÇ£»Äa²»±Ø¶Ôÿ¸oÔªËؽøÐвÙ×÷£¬a¯ÀÀÆ÷»a×Ô¶¯Ó¦ÓÃÕaÐ(C)¹aeÔo¡£¸ßЧ°É£¡

ÐÂÔoÑuʽ¹aeÔo

CSSStyleSheet¶ÔÏoÀi»¹ÓÐÒ»¸oinsertRule½¨£¬µ«ÔÚÔçÆÚµÄIEÀiÊÇûÓÐÕa¸o½¨µÄ¡£insertRule½¨°ÑaddRule½¨µÄÇ°Á½¸o²ÎÊý»iºÏµ½ÁËÒ»Æð£º

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
Õa¸o½¨¿´ÆðÀ´ºÜ³oª£¬µ«ÎÞÒÉÒ²ÊÇ*dz£ÓÐÓõġ£

°²È«µÄÓ¦ÓÃÑuʽ¹aeÔo

ÒoΪ²¢²»ÊÇËuÓеÄa¯ÀÀÆ÷¶¼Ö§³ÖinsertRule£¬×iºÃÎÒÃÇ×oÒ»Ð(C)a×°À´È±£´uÂeµÄÓÐЧִÐС£ÏÂÃae¾ÍÊÇÒ»¸oºÜ¼oµ¥µÄa×°½*¨£º

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

Õa¸o½¨¿ÉÒÔÓ¦¶Ô¸÷ÖÖÇe¿o¡£Èç¹uÄaÏe°ÑÕa¸o½¨ÀiµÄ´uÂeµ¥¶ÀÄóoÀ´Ê¹Óã¬×iºÃÓÃtry{}catch(e){}°ÑËuÃÇ°uÆðÀ´¡£

ΪýÌa²eѯ(Media Queries)Ôo¼ÓÑuʽ¹aeÔo

ÓÐÁ½¸o½¨¿ÉÒÔΪÌض¨µÄýÌa²eѯÔo¼ÓÑuʽ¹aeÔo¡£µÚÒ»ÖÖÊÇͨ¹ý±e×¼µÄinsertRule½¨£º

sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");
ÒoΪÀÏʽµÄIE²»Ö§³ÖinsertRule£¬ÎÒÃÇ¿ÉÒÔʹÓÃÁiÍaÒ»ÖÖ½¨£¬¾ÍÊÇ´´½¨Ò»¸oSTYLEÔªËØ£¬¸³ÓeËuÕýȵÄmediaÊoÐÔ£¬È»ºoÍuÀiÃaeÌi¼ÓеÄÑuʽ¹aeÔo¡£ÕaÖֽʽ»aÔo¼Ó¶iÍaµÄSTYLEÔªËØ£¬µ«Ê®*ֵļoµ¥¡£

ÎÒÈÏΪ¶¯Ì¬µÄÍuÑuʽ±iÀiÌi¼ÓÑuʽ¹aeÔoÊÇÒ»ÖÖʮָßЧ¶øÇÒ¼oµ¥µÄ¼¼Êo¡£¼ÇסÔÚÄaµÄÏÂÒ»¸oÓ¦ÓÃÀiÊÔÒ»ÏÂÕaÖÖ¼¼Êo£¬Ëu»aÊ¡ÁËÄaºÜ¶a¹¦o¡£

(Ó¢ÎÄ£ºAdd Rules to Stylesheets with JavaScript.)

ÒÔÉϾÍÊDZ¾ÎĵÄÈ«²¿ÄÚÈÝ£¬Ï£Íu¶Ô´o¼ÒµÄѧϰÓÐËu°iÖu£¬Ò²Ï£Íu´o¼Ò¶a¶aÖ§³Ö½Å±¾Ö®¼Ò¡£