17

是否可以使用 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。

4

3 回答 3

34

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

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

http://jsfiddle.net/vfLS3/

于 2013-04-17T03:49:34.277 回答
5

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

在 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');}}");
于 2016-02-29T14:57:38.893 回答
1

对于一般用途，您可以将样式表附加到document.head. 然后你可以把任何你想要的模组放在那里——包括媒体查询。由于它是 中的最终样式表document.head，因此它会覆盖任何先前的 CSS 规则。

香草 JavaScript：

    let style = document.getElementById('custom-styles');
    if (!style) {
      style = document.createElement('style');
      style.id = "custom-styles";
      document.head.appendChild(style);
    }
    style.innerHTML =
      "@media screen and (min-width:400px) {...}";
于 2020-03-20T15:33:39.123 回答