使用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>');

有什么建议吗？谢谢。

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>');

Answer 2

您可以使用

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

获取样式元素并添加新规则，如果不存在则添加html

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

Answer 3

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

这是我的策略： 创建一个新的<style>元素；填写所需的内容；附加到身体上，以至于最后

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