是否可以使用 Javascript 或 jQuery 即时创建完整的媒体查询规则?
我已经使用大量媒体查询来使用内联 CSS、导入和链接文件来定位通用视口和特定设备/屏幕:
@media screen and (min-width:400px) { ... }
@import url(foo.css) (min-width:400px);
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="foo.css" />
我可以使用 jQuery 添加/删除类:
$("foobar").click(function(){
$("h1,h2,h3").addClass("blue");
$("div").addClass("important");
$('#snafu').removeClass('highlight');
});
我还查看了 document.stylesheets
以及看似陈旧且特定于浏览器的内容:
document.styleSheets[0].insertRule("p{font-size: 20px;}", 0)
但我找不到任何以编程方式生成的参考:
@media screen and (min-width:400px)
直接从 javascript 或以任何形式。
原文由 nickhar 发布,翻译遵循 CC BY-SA 4.0 许可协议
您可以只更新现有的
<style>
元素(或创建一个)textContent
以包含规则,这将使它在给定的上下文中有效。http://jsfiddle.net/vfLS3/