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

Posted 2023-03-06

【中文标题】使用 javascript 或 jQuery 生成 CSS 媒体查询

【英文标题】：Generating CSS media queries with javascript or jQuery

【发布时间】：2013-04-09 16:15:30

【问题描述】：

是否可以使用 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("pfont-size: 20px;", 0)

但我找不到任何关于以编程方式生成的参考：

  @media screen and (min-width:400px)

直接来自javascript或以任何形式。

【问题讨论】：

仅更新现有的style 元素的内容似乎可以正常工作：jsfiddle.net/vfLS3

你的意思是添加css媒体查询规则吗？

@ExplosionPills 这是完美的，值得“回答”

【参考方案1】：

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

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

http://jsfiddle.net/vfLS3/

【讨论】：

$('style').text("@media (min-width:400px) div color:red; ")

@MuhammadUmer 将覆盖样式元素的全部内容而不是附加到它

@MuhammadUmer .append 不附加文本内容，而是附加一个元素。如果参数是一个字符串，jQuery 将尝试选择元素并在@

上阻塞

但它也添加了文本

但更安全的方法是这样$('p')[0].innerhtml='css';

【参考方案2】：

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

在 HTML 中：

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

在 JS 中

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

【参考方案3】：

对于一般用途，您可以将样式表附加到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) ...";