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)内的规则静音，只需添加一个新的样式表，将其覆盖为默认值：

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

如果您坚持使用Javascript，则可以通过迭代document.styleSheets来访问和修改css规则。

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

事实是，如果你删除一个媒体查询，另一个被激活。所以你必须做一个循环，直到找不到媒体查询：

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()}();

Answer 3

你可能最好不要覆盖它而不是试图删除它，但如果你必须：

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

未测试。

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

3 个答案: