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
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"
style
de l'élément de contenu semble bien fonctionner: jsfiddle.net/vfLS3Entendez-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
Vous devez vous connecter pour publier un commentaire.
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é.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
- Je utiliser de cette façon. Cela permet de mettre à jour multiplier les styles dans le document
en HTML:
en JS
OriginalL'auteur Server Izetov