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

Question

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

$('.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 的答案相当不错，但它附加到文档中的第一个样式元素。 这可能有两个方面的问题：
a) 可能没有样式元素（因为<link rel="stylesheet"> ）；
b) 可能有多个样式元素。 将样式规则附加到第一个规则可能会被后面的规则覆盖。

所以这是我的策略：创建一个新的<style>元素； 填充所需的内容； 附加到正文，以便它最后出现

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