Generating CSS media queries with javascript or jQuery

Question

Is it possible to create full media query rules on the fly using Javascript or jQuery?

I've used numerous media queries to target generalised viewports and specific devices/screens using inline CSS, imports and linked files:

@media screen and (min-width:400px) { ... }
@import url(foo.css) (min-width:400px);
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="foo.css" />

I can add/remove classes using jQuery:

$("foobar").click(function(){
  $("h1,h2,h3").addClass("blue");
  $("div").addClass("important");
  $('#snafu').removeClass('highlight');
});

I've also look at document.stylesheets and the seemingly archaic and browser-specific:

  document.styleSheets[0].insertRule("p{font-size: 20px;}", 0)

But I can't find any reference to programatically generating:

  @media screen and (min-width:400px)

from javascript directly or in any form.

Just updating an existing style element's contents seems to work fine: jsfiddle.net/vfLS3 — Explosion Pills
– Explosion Pills, Commented Apr 17, 2013 at 3:35

Explosion Pills · Accepted Answer · 2013-04-17 03:49:34Z

35

You can just update an existing <style> element (or create one) textContent to contain the rule, which will make it effective in the given context.

document.querySelector('style').textContent +=
    "@media screen and (min-width:400px) { div { color: red; }}"

http://jsfiddle.net/vfLS3/

answered Apr 17, 2013 at 3:49

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Muhammad Umer Over a year ago

$('style').text("@media (min-width:400px) {div{ color:red; }}")

Explosion Pills Over a year ago

@MuhammadUmer that would overwrite the entire contents of the style element rather than append to it

Explosion Pills Over a year ago

@MuhammadUmer .append does not append text content but rather an element. If the argument is a string, jQuery will attempt to select the element and will choke on @

Muhammad Umer Over a year ago

but it does add text also

Muhammad Umer Over a year ago

but safer way to do it would be like this $('p')[0].innerHTML='css';

Server Izetov · Accepted Answer · 2016-02-29 14:57:38Z

7

I use this way. This allows to update multiply styles in document

in HTML:

<style class="background_image_styles">
</style>

in JS

$(".background_image_styles").text("@media (min-width: 1200px) {.user_background_image{background-image: url('https://placehold.it/1200x300');}}");

answered Feb 29, 2016 at 14:57

Server Izetov

1561 silver badge2 bronze badges

Comments

terrymorse · Accepted Answer · 2020-03-20 15:33:39Z

2

For general purpose use, you can append a style sheet to document.head. Then you can put any mods in there you want -- including media queries. Since it's the final style sheet in document.head, it overrides any prior CSS rules.

Vanilla JavaScript:

    let style = document.getElementById('custom-styles');
    if (!style) {
      style = document.createElement('style');
      style.id = "custom-styles";
      document.head.appendChild(style);
    }
    style.innerHTML =
      "@media screen and (min-width:400px) {...}";

answered Mar 20, 2020 at 15:33

terrymorse

7,1561 gold badge23 silver badges31 bronze badges

Comments

TefoD · Accepted Answer · 2022-03-13 06:40:22Z

0

I prefer this variant - appending to the end of the head section:

$('<style/>', {
    text: '@media print { @page { margin: 10 20 20 10; } body { margin: 0.5cm; }}',
    appendTo: win.document.head
})

answered Mar 13, 2022 at 6:40

TefoD

1771 silver badge12 bronze badges

Collectives™ on Stack Overflow

Generating CSS media queries with javascript or jQuery

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related