Adding CSS media queries with javascript or jQuery - Stack Overflow

admin管理员组

文章数量:1350800

I'm having some issues trying to add media queries with jQuery/javascript. I have a <div class="container"> hidden on small screens with display: none. I want to use the code below to make it show up, although I don't get any errors nothing changes.

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

Any suggestions? Thank you.

I'm having some issues trying to add media queries with jQuery/javascript. I have a <div class="container"> hidden on small screens with display: none. I want to use the code below to make it show up, although I don't get any errors nothing changes.

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

Any suggestions? Thank you.

• javascript
• jquery
• css

Share Improve this question Follow edited Mar 8, 2016 at 17:42 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Mar 8, 2016 at 17:35 sixtorodriguezsixtorodriguez 3111 silver badge44 bronze badges 4

• 1 Why append a media query in JS and not have it in the DOM on load? This is a little redundant and goes against the point of having media queries in the first place. – Rory McCrossan Commented Mar 8, 2016 at 17:43
• $('head').append.. and you don't need double quotes around display and block – The Process Commented Mar 8, 2016 at 17:46
• Thanks for the info. I know it's much easier to use Media Queries in a CSS style sheet, but in this particular case I have to use JavaScript or jQuery. – sixtorodriguez Commented Mar 9, 2016 at 12:25
• Does this answer your question? Generating CSS media queries with javascript or jQuery – Frédéric Commented Jun 6, 2022 at 13:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

It's will work fine if you only delete double quotes form "display": "block"

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

but I think better if you change your selector

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

You can use

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

Get style element and add your new rules, and your html add if no exists

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

The answer of CMedina is quite good, but it appends to the first style element in the document. This could be problematic in two ways:
a) There might not be style element (because <link rel="stylesheet">);
b) There might be more than one style element. Appending style rules to the first one might be overwritten by later ones.

So here's my tactic: create a new <style> element; fill with desired content; append to the body so it es last

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

本文标签： Adding CSS media queries with javascript or jQueryStack Overflow