Générer les requêtes de média CSS avec javascript ou jQuery

Est-il possible de créer plein de médias règles de requêtes à la volée à l'aide de Javascript ou jQuery?

J'ai utilisé de nombreuses requêtes de média pour cible généralisé fenêtres et des appareils spécifiques/écrans à l'aide des CSS, les importations et les fichiers liés:

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

Je peux ajouter/supprimer des classes à l'aide de jQuery:

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

J'ai aussi regarder document.stylesheets et apparemment archaïque et spécifiques à un navigateur:

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

Mais je ne trouve pas de référence à programmant la génération:

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

à partir de javascript directement ou dans n'importe quelle forme.

Juste la mise à jour de l'existant style de l'élément de contenu semble bien fonctionner: jsfiddle.net/vfLS3
Entendez-vous l'ajout d'un média css de la règle de requête?
C'est parfait et digne d'un "répondre"

OriginalL'auteur nickhar | 2013-04-17

  1. 30

    Vous pouvez simplement mettre à jour une <style> élément (ou d'en créer un) textContent pour contenir la règle, à laquelle il sera efficace dans le contexte donné.

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

    http://jsfiddle.net/vfLS3/

    $('style').text("@media (min-width:400px) {div{ color:red; }}")
    qui serait de remplacer la totalité du contenu de l'élément style plutôt que de s'y ajouter
    ne pas ajouter du contenu du texte, mais plutôt un élément. Si l'argument est une chaîne de caractères, jQuery tentera de sélectionner l'élément et va s'étouffer sur @
    mais il le fait d'ajouter du texte aussi
    mais plus sûr moyen de le faire serait comme cette $('p')[0].innerHTML='css';

    OriginalL'auteur Explosion Pills

  2. 5

    - Je utiliser de cette façon. Cela permet de mettre à jour multiplier les styles dans le document

    en HTML:

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

    en JS

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

    OriginalL'auteur Server Izetov