使用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

您可以使用

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

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

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

Answer 2

它会正常工作，如果你只是删除双引号形成“显示“：”块“

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

但我认为如果y ou更改您的选择器

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