使用JavaScript或jQuery添加CSS媒体查询

Question

我在尝试使用jQuery / javascript添加媒体查询时遇到了一些问题。 我有一个<div class="container">在小屏幕上隐藏，使用display:none。 我想使用下面的代码使其显示出来，但是虽然没有错误，但什么也没有改变。

$('.container').append('<style type="text/css">@media screen and (min-width: 1012px){ .container { "display": "block"}}</style>');

有什么建议吗？谢谢。

- sixtorodriguez

---

为什么要在JS中追加媒体查询而不是在加载时将其放入DOM中？这有点多余，并违背了一开始使用媒体查询的初衷。 - Rory McCrossan

$('head').append()，并且在display和block周围不需要使用双引号。 - The Process

谢谢提供的信息。我知道在CSS样式表中使用媒体查询要简单得多，但在这种特殊情况下，我必须使用JavaScript或jQuery。 - sixtorodriguez

这个回答解决了你的问题吗？使用JavaScript或jQuery生成CSS媒体查询 - Frédéric

Answer 1

如果您只删除"display": "block"中的双引号，那么它将正常工作。

$('.container').append('<style type="text/css">@media screen and (max-width: 1012px){ .container { display: block}}</style>');

但我认为如果您更改选择器会更好

$('head').append('<style type="text/css">@media screen and (max-width: 1012px){ .container { display: block}}</style>');

- shihab

---

谢谢提供信息。到目前为止，我已经尝试了这个方法，但是它没有起作用。也许我漏掉了什么。所以基本上你是将这个CSS样式附加到头标签中？ - sixtorodriguez

Answer 2

你可以使用

标签。

document.querySelector('style').textContent +=
"@media screen and (min-width: 1012px){ .container { display: 'block'}}"

获取样式元素并添加新规则，如果不存在则添加到您的html中。

<style>......</style>

- CMedina

Answer 3

CMedina的回答非常好，但它附加到文档中的第一个样式元素。这可能有两个问题：
a) 可能没有样式元素（因为<link rel="stylesheet">）；
b) 可能有多个样式元素。将样式规则附加到第一个可能会被后面的覆盖。

所以这是我的策略： 创建一个新的<style>元素；填充所需内容；附加到主体，使其成为最后一个。

  const styleSheet = document.createElement('style');
  styleSheet.textContent = '@media print { /* ... */ }';
  document.body.appendChild(styleSheet, 'beforeend');

- yunzen