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

新手上路,请多包涵

是否可以使用 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 许可协议

阅读 396
2 个回答

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

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

http://jsfiddle.net/vfLS3/

原文由 Explosion Pills 发布,翻译遵循 CC BY-SA 3.0 许可协议

我用这种方式。这允许更新文档中的多重样式

在 HTML 中:

 <style class="background_image_styles">
</style>

在 JS 中

$(".background_image_styles").text("@media (min-width: 1200px) {.user_background_image{background-image: url('https://placehold.it/1200x300');}}");

原文由 Server Izetov 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题