Javascript：从外部css文件中删除媒体查询

本文介绍了Javascript：从外部css文件中删除媒体查询的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何从外部css文件（< link rel =stylesheettype =text / csshref =XXXX.cssmedia =screen> ）？请注意，我无法禁用整个链接标记，因为其他重要样式不包括在该媒体查询中：

  body {... } 
 .container {...} 
 ... 
 @media（min-width：XXXpx）{
 .... 
} 
 ...

谢谢！

强烈建议使用纯CSS解决方案解决此问题，例如定义新样式表覆盖您不想要的样式表。

  #selector {
 color：＃000; 
} 
 
 .some-classs-you-want-to-reserve {/*..*/} 
 
 @media只有屏幕和（最小宽度：600px）{
 / *不需要的* / 
 #selector {
 display：none; 
 
 
 
 
 $ b例如，如果你想在 @media仅屏幕和（最小宽度：600px），只需添加新样式表即可将其覆盖为默认值：
 
 
 <$只有屏幕和（最小宽度：600px）{
 / *不需要* / 
 #selector {
 display：block; 
 
 
 
 
 $ b 如果你坚持使用Javascript，你可以访问和通过迭代 document.styleSheets 来修改css规则。 
 
 
  
 
  
   
 
   
 
 
 
 
 这是StyleSheetList的一个实例，它是一个类似数组的对象。它的每一项代表一个外部或内联的CSS样式表。包括媒体查询在内的所有规则都可以在其中找到。
 
 
 简要的树形结构： 
 
 
   -  document.styleSheets 
 |  -  CSSStyleSheet 
 |  -  cssRules 
 |  -  media 
  
因此，下面是一个示例，显示如何删除 @media屏幕和（最小宽度：600px）块中定义的所有规则：
  function removeRule（）{
 if（typeof window.CSSMediaRule！==function）
 return false ; //你的浏览器不支持媒体查询功能
 
 var s = document.styleSheets，r，
 i，j，k; 
 
 if（！s）return false; //找不到任何样式表
 
 //步行throuth css表单
（i = 0; i< s.length; i ++）{
 //获取所有规则
r = s [i] .cssRules; 
 if（！r）continue; 
 
 for（j = 0; j  //如果有一个媒体查询规则
 if（r [j] instanceof CSSMediaRule& & 
r [j] .media.mediaText ==only screen and（min-width：600px））{
 for（k = 0; k< r [j] .cssRules.length; k）{
 //删除它的所有规则
r [j] .deleteRule（r [j] .cssRules [k]）; 
} 
返回true; 
} 
} 
} 
} 
 removeRule（）; 
  
或活小提琴： 
 
How could I remove media query loaded from external css file (<link rel="stylesheet" type="text/css" href="XXXX.css" media="screen">)? Note that I cant disable the entire link tag because other important styles are included out of that media query:
body{...}
.container{...}
...
@media(min-width:XXXpx) {
....
}
...
Thank you!
 解决方案 
I strongly recommend pure CSS solution for this problem, such as defining a new stylesheet overwritting rules you don't want.
#selector {
    color: #000;
}

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

@media only screen and (min-width: 600px) {
    /* unwanted */
    #selector {
        display: none;
    }
}
For example, if you want to mute rules inside @media only screen and (min-width: 600px), simply add a new stylesheet overwritting them to default values:
@media only screen and (min-width: 600px) {
    /* unwanted */
    #selector {
        display: block;
    }
}
If you insist on using Javascript, you can access and modify css rules by iterating document.styleSheets. 
https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets
This is an instance of StyleSheetList, an array-like object. Each item of it represents an external or inline css stylesheet. All rules including media queries can be found inside it.
A brief tree structure:
- document.styleSheets
   |- CSSStyleSheet
       |- cssRules
       |- media
So here's an example showing how to remove all rules defined inside @media only screen and (min-width: 600px) block:
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();
Or live fiddle: http://jsfiddle.net/e4h41qm2/
                        这篇关于Javascript：从外部css文件中删除媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！