Generieren von CSS-Medienabfragen mit JavaScript oder jQuery

Question

Ist es möglich, vollständige Medienabfrageregeln mithilfe von Javascript oder jQuery zu erstellen?

Ich habe zahlreiche Medienanfragen verwendet verallgemeinert Ansichtsfenster und bestimmte Geräte/Bildschirme mit Inline-CSS, importiert und verknüpften Dateien Ziel:

@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" /> 

ich hinzufügen/entfernen Klassen jQuery:

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

ich habe auch einen Blick auf document.stylesheets und die archaisch anmutenden und Browser-spezifisch:

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

Aber ich kann nicht jede Bezugnahme finden programmatisch zu erzeugen:

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

von Javascript direkt oder in irgendeiner Form.

Answer 1

Sie können einfach ein vorhandenes <style> Element aktualisieren (oder eines erstellen) textContent, um die Regel zu enthalten, die es im gegebenen Kontext wirksam macht.

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

http://jsfiddle.net/vfLS3/

Answer 2

Ich benutze diese Art und Weise. Dies ermöglicht es mehrfach Stile in Dokument

in HTML zu aktualisieren:

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