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

Adding CSS media queries with javascript or jQuery

本文关键字：CSS 媒体 查询 添加 jQuery javascript 使用      更新时间：2023-09-26

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

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

有什么建议吗？谢谢。

如果您只删除"显示"形式的双引号："块"，它将正常工作 

$('.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>');
您可以使用 

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

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

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

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

所以我的策略是：创建一个新的<style>元素;填充所需的内容;附加到正文，使其排在最后

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