Javascript 在同样适用于Safari的浏览器中启用或禁用媒体查询的方法

如果在一个页面上有多个媒体查询，则可以将规则的conditionText设置为启用或禁用规则：

// enables a rule
document.styleSheets[2].rules[0].conditionText= "(min-width: 0px)";

// disables a rule
document.styleSheets[2].rules[0].conditionText= "(min-width: 99999px)";

这适用于所有主要浏览器，但我刚刚发现Safari除外

是否有其他方法可以启用或禁用媒体查询规则

注意：使用上述代码启用和禁用媒体查询，方法是说：“如果浏览器宽度不小于0px，则启用此查询”，然后

---

“除非浏览器的宽度为9999px，否则不要启用这些样式”。我找不到启用或禁用属性

这似乎有效。需要进行更多的测试：

var inclusionQuery = "(min-width: 0px)";
var exclusionQuery = "noDeviceIsEverNamedThis and (min-width: 99999px)";

function enableMediaQuery(rule) {

    try {
        rule.media.mediaText = inclusionQuery;
    }
    catch(error) {
        rule.conditionText = inclusionQuery;
    }
}

function disableMediaQuery(rule) {

    try {
        rule.media.mediaText = exclusionQuery;
    }
    catch(error) {
        rule.conditionText = exclusionQuery;
    }
}

添加了@DavidThomas中不存在的设备排除

---

在早期的测试中，mediaText或相关属性是只读的，但它似乎在Safari上。将更新答案。

这似乎是一种脆弱的方法，但如何修改规则以包括不推荐使用且不太可能使用的设备类型：

tty和（最小宽度：9999px）

？或者您可以使用不存在的设备类型，导致：

thisDeviceTypeDoesNotExist and（min width:9999px）

，不过，老实说，我认为更改设备类型将否定使用

min width

条件的必要性。这就是为什么我一直在寻找替代方案。在答案中添加了您的条件。老实说，我很惊讶没有API来激活/停用特定（理想名称）媒体查询。这是一个很好的功能要求。可以应用于任何规则。我不确定我有一个好的方法来解释为什么这样一个API应该存在，或者它应该有什么效用（或者扩展到包括）；但是，如果您想坚持到底，并为未来版本的EcmaScript提出一个strawman/level 0建议：