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