javascript - 使用 javascript 或 jQuery 生成 CSS 媒体查询

Question

是否可以使用 Javascript 或 jQuery 即时创建完整的媒体查询规则？

我使用了大量媒体查询来定位通用视口(viewport)和特定设备/屏幕，使用内联 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。

Answer 1

您可以只更新现有的 <style>元素(或创建一个)textContent包含规则，这将使它在给定的上下文中有效。

document.querySelector('style').textContent +=
    "@media screen and (min-width:400px) { div { color: red; }}"

http://jsfiddle.net/vfLS3/