您可以通过 访问文档中的样式表列表document.styleSheets
。每个工作表都是一个CSSStyleSheet
对象,它有一个规则列表。有一种称为 a 的规则CSSMediaRule
,其中包含媒体查询的信息,包括该查询的规则及其适用的媒体。理论上,您可以更改它适用的媒体。
MDN 对此有一些文档,这是一个起点。
这是一个完整的示例,它查找匹配的媒体规则(max-width: 320px)
并将其更改为(max-width: 2000px)
:Live Copy | 资源
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Media Query</title>
<style type="text/css">
p { color: green }
@media (max-width: 320px) {
p { color: red }
}
</style>
<meta charset="UTF-8">
</head>
<body>
<p>This is text turns red after two seconds</p>
<script>
setTimeout(function() {
var sheets, sheetIndex, ruleIndex, sheet, rules, rule, media;
sheets = document.styleSheets;
for (sheetIndex = 0; sheetIndex < sheets.length; ++sheetIndex) {
sheet = sheets[sheetIndex];
rules = sheet.cssRules || sheet.rules;
for (ruleIndex = 0; ruleIndex < rules.length; ++ruleIndex) {
rule = rules[ruleIndex];
if (rule.media && rule.media.mediaText === "(max-width: 320px)") {
console.log("Changing 320px rule to 2000px");
rule.media.mediaText = "(max-width: 2000px)";
}
}
}
}, 2000);
</script>
</body>
</html>
显然这是非常粗略的代码,我只检查过它是否适用于 Chrome 和 Firefox。我知道 IE 中的这些对象与其他对象存在一些差异(见rules = sheet.cssRules || sheet.rules;
上文,这就是其中之一)。但这可能是一个起点。