Javascript：從外部css文件中刪除媒體查詢

Question

如何刪除從外部css文件加載的媒體查詢（<link rel="stylesheet" type="text/css" href="XXXX.css" media="screen">）？請注意，我無法禁用整個鏈接標記，因爲其他重要樣式包含在該媒體查詢中：

body{...} 
.container{...} 
... 
@media(min-width:XXXpx) { 
.... 
} 
... 

謝謝！

Answer 1

我強烈推薦純CSS解決方案，比如定義一個新的樣式表覆蓋你不想要的規則。

#selector { 
    color: #000; 
} 

.some-classs-you-want-to-reserve {/*..*/} 

@media only screen and (min-width: 600px) { 
    /* unwanted */ 
    #selector { 
     display: none; 
    } 
} 

例如，如果您想要靜音裏面@media only screen and (min-width: 600px)規則，只需添加一個新的樣式表overwritting他們爲默認值：

@media only screen and (min-width: 600px) { 
    /* unwanted */ 
    #selector { 
     display: block; 
    } 
} 

如果你堅持使用Javascript，您可以訪問和修改CSS規則迭代document.styleSheets。

• https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
• https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

這是StyleSheetList，類似陣列的對象的實例。它的每一項代表一個外部或內聯的CSS樣式表。包括媒體查詢在內的所有規則都可以在其中找到。

一個簡短的樹形結構：

- document.styleSheets 
    |- CSSStyleSheet 
     |- cssRules 
     |- media 

因此，這裏是展示如何刪除裏面@media only screen and (min-width: 600px)塊中定義的所有規則的一個例子：

function removeRule() { 
    if(typeof window.CSSMediaRule !== "function") 
     return false; //Your browser doesn't support media query feature 

    var s = document.styleSheets, r, 
     i, j, k; 

    if(!s) return false; //no style sheets found 

    // walk throuth css sheets 
    for(i=0; i<s.length; i++) { 
     // get all rules 
     r = s[i].cssRules; 
     if(!r) continue; 

     for(j=0; j<r.length; j++) { 
      //If there's a rule for media query 
      if(r[j] instanceof CSSMediaRule && 
        r[j].media.mediaText == "only screen and (min-width: 600px)") { 
       for(k=0; k<r[j].cssRules.length; k++) { 
        // remove all rules of it 
        r[j].deleteRule(r[j].cssRules[k]); 
       } 
       return true; 
      } 
     } 
    } 
} 
removeRule(); 

或活小提琴：http://jsfiddle.net/e4h41qm2/

Answer 2

你可能會更好過覆蓋它，而不是試圖將其刪除，但如果你必須：

style = document.styleSheets[0]; // or whatever stylesheet you want 

[].forEach.call(style.cssRules || [], function(rule, i) { 
    if (!rule.cssText.indexOf('@media(min-width:XXXpx') { 
     style.deleteRule(i); 
    } 
}); 

未經檢驗。

Answer 3

事實是，如果你刪除了一個媒體查詢，另一個被激活。所以，你必須在之前沒有媒體查詢發現做一個循環：

function removeRule() { 
    if (typeof window.CSSMediaRule !== 'function') { 
     return false; 
    } 
    var styleSheets = document.styleSheets; 
    var number = 0; 

    if (!styleSheets) { 
     return false; 
    } 

    for (i = 0; i < styleSheets.length; i++) { 
     var styleSheet = styleSheets[i]; 
     var rules = styleSheet.cssRules; 
     if (!rules) { 
      continue; 
     } 
     for (var j = 0; j < rules.length; j++) { 
      var cssText = rules[j].cssText; 
      if (cssText.indexOf('@media') === 0) { 
       number++; 
       styleSheet.deleteRule(j); 
      } 
     } 
    } 
    if (number) { 
     return number; 
    } 
    return 0; 
} 

function removeMediaQueries() { 
    var num = removeRule(); 
    var total = num; 
    while (num) { 
     num = removeRule(); 
     total += num; 
    } 
    if (total) { 
     console.info(total + ' media quer' + (total == 1 ? 'y' : 'ies' + ' removed')); 
    } else { 
     console.info('No media queries removed'); 
    } 
} 
removeMediaQueries(); 

如果你把所有這一切在同一行，你可以生成你的瀏覽器中的書籤，並有一個快速的方法來測試，而不媒體查詢設計。對通訊非常有用。

javascript:!function(){function e(){if("function"!=typeof window.CSSMediaRule)return!1;var e=document.styleSheets,n=0;if(!e)return!1;for(i=0;i<e.length;i++){var o=e[i],r=o.cssRules;if(r)for(var t=0;t<r.length;t++){var f=r[t].cssText;0===f.indexOf("@media")&&(n++,o.deleteRule(t))}}return n?n:0}function n(){for(var i=e(),n=i;i;)i=e(),n+=i;n?console.info(n+" media quer"+(1==n?"y":"ies removed")):console.info("No media queries removed")}n()}();