CODEWITHSUNDEEP
javascriptjquerycssmedia-queries
nickhar
nickhar

Reputation: 20823

Generating CSS media queries with javascript or jQuery

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.

Upvotes: 19

Views: 38114

Answers (4)

TefoD
TefoD

Reputation: 177

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
})

Upvotes: 0

terrymorse
terrymorse

Reputation: 7086

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) {...}";

Upvotes: 2

Server Izetov
Server Izetov

Reputation: 156

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');}}");

Upvotes: 7

Explosion Pills
Explosion Pills

Reputation: 191729

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/

Upvotes: 35

Related Questions