Réglage CSS pseudo-règles de classe à partir de JavaScript

Je suis à la recherche d'un moyen de modifier les règles CSS pour les pseudo-sélecteurs de classe (comme :link, :hover, etc.) à partir de JavaScript.

Donc un analogue du code CSS: a:hover { color: red } en JS.

Je ne pouvais pas trouver la réponse ailleurs, si quelqu'un sait que c'est quelque chose que les navigateurs ne prennent pas en charge, ce serait un résultat utile ainsi.

InformationsquelleAutor user39882 | 2008-11-22
  1. 179

    Vous ne pouvez pas le style de la pseudo-classe sur un seul élément, de la même manière que vous ne pouvez pas avoir une pseudo-classe dans un inline style="..." attribut (comme il n'y a pas de sélecteur).

    Vous pouvez le faire en modifiant la feuille de style, par exemple par l'ajout de la règle:

    #elid:hover { background: red; }

    en supposant que chaque élément que vous souhaitez affecter a un ID unique pour lui permettre d'être sélectionné.

    En théorie, le document que vous voulez est http://www.w3.org/TR/DOM-Level-2-Style/Overview.html qui signifie que vous pouvez (étant donné un pré-existants incorporé ou lié feuille de style) à l'aide d'une syntaxe du type:

    document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

    C'est à dire, bien sûr, nécessite sa propre syntaxe:

    document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

    Plus âgés et les navigateurs mineurs sont susceptibles de ne pas l'appui de la syntaxe. Dynamique de la feuille de style-manipulation se fait rarement parce que c'est assez ennuyeux pour obtenir le droit, rarement nécessaire, et historiquement gênants.

    • +1 très utile
    • Pourquoi n'était-ce pas choisi comme réponse?
    • Plus spécifique, Url de référence: - < w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet > - < developer.mozilla.org/en/DOM/CSSStyleSheet/insertRule > - < developer.apple.com/library/safari/#documentation/... >
    • Firefox: "Erreur: L'opération est d'insécurité."
    • l'opération est considérée comme précaire si vous êtes tentez de manipuler un fichier CSS à partir d'un domaine différent (je suppose que c'est un type de la même origine politique de la chose). La honte! La fonction Simple de vérifier est conforme à la politique de " même origine: function sameOrigin(url) { var loc = window.location, a = document.createElement('a'); a.href = url; return a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol; }
    • La manipulation de la feuille de style juste pour appliquer des styles à un élément spécifique n'est pas recommandé, car il provoque le navigateur de redistribution de l'ensemble du document à chaque fois que la feuille de style est changé. stubbornella.org/content/2009/03/27/...

    InformationsquelleAutor bobince
  2. 29

    J'ai jeté un petite bibliothèque pour cette depuis je ne pense qu'il y a valide les cas d'utilisation pour la manipulation de feuilles de style en JS. Des raisons d'être:

    • Définition des styles qui doit être calculé ou extrait - par exemple en définissant le préféré de l'utilisateur de la police de la taille d'un cookie.
    • Réglage du comportement (pas très esthétique) les styles, en particulier pour les UI widget/les développeurs de plugin. Onglets, des manèges, etc, souvent besoin de quelques notions de CSS tout simplement à la fonction, - ne pas demande une feuille de style pour la fonction de base.
    • Mieux que des styles en ligne depuis CSS règles s'appliquent à tous les actuels et futurs des éléments, et de ne pas encombrer le code HTML lors de l'affichage dans Firebug /Outils de développement.
    • À l'air vraiment sympa
    InformationsquelleAutor David Tang
  3. 16

    Une fonction pour faire face à la croix-navigateur trucs:

    addCssRule = function(/* string */ selector, /* string */ rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(bc.createEl('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      //IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      //IE
      ss.addRule(selector, rule, l);
    }
  }
};
    InformationsquelleAutor
  4. 6

    Mon truc, c'est à l'aide d'un sélecteur d'attribut. Les attributs sont les plus faciles à mettre en place par javascript.

    css

    .class{ /*normal css... */}
.class[special]:after{ content: 'what you want'}

    javascript

      function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }

    html

    <element id='x' onclick="setSpecial(this.id)"> ...
    • Cette solution utilise jQuery – introduisant une dépendance de la taille de jQuery pour quelque chose d'aussi simple que cela, lorsque l'interlocuteur demandé pur Javascript, est mauvais.
    • Bien que pratiquement tous les sites web aujourd'hui, l'UTILISATION de jquery, je vais le modifier pour l'utiliser pur javascript.
    • Et exactement comment fonctionne cette méthode est de changer les attributs CSS de la .la classe[spécial]:après le pseudo-élément, par exemple, la couleur d'arrière-plan ou quoi que ce soit d'autre?
    InformationsquelleAutor Sergio Abreu
  5. 6

    Il suffit de placer le css dans un modèle de chaîne de caractères.

    const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;

    Puis créer un élément de style et placez la chaîne dans le style de la balise et de la joindre au document.

    const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);

    Spécificité prendra soin du reste. Ensuite, vous pouvez supprimer et ajouter des balises de style de façon dynamique. C'est une alternative simple aux bibliothèques et de jouer avec la feuille de style de tableau dans les DOM. Amusez-Vous Bien!

    • insertAdjacentElement nécessite 2 arguments dans les principaux navigateurs (Chrome, Firefox, Edge), le premier établissement de la position par rapport à l'élément de référence (voir ici). Est-ce un changement récent ? (Ajouté 'beforeend" pour la réponse).
    InformationsquelleAutor tangle sites
  6. 5

    Il est une autre alternative. Plutôt que de manipuler les pseudo-classes directement, de créer de véritables classes qui modèle les mêmes choses, comme un "hover" de la classe ou un "visité" de la classe. Style les classes avec l'habituel "." syntaxe et puis vous pouvez utiliser JavaScript pour ajouter ou supprimer des classes à partir d'un élément lorsque l'événement se déclenche.

    • Cela ne fonctionne pas :before et :after pseudo-classes.
    • Et ce n'est pas applicable pour changer l'image de fond avec une valeur récupérée via AJAX.
    • pseudo-éléments, et non des classes.
    • oui, merci pour la correction! Ne semble pas possible de modifier mon commentaire.
    InformationsquelleAutor Brandon Ramirez
  7. 3

    Au lieu de directement paramètre de pseudo-règles de classe avec le javascript, vous pouvez définir les règles différemment dans les différents fichiers CSS, puis l'utilisation de Javascript pour passer une feuille de style et de basculer dans une autre. Une méthode est décrite à Une Liste À Part (qv. pour plus de détails).

    Configurer les fichiers CSS, comme,

    <link rel="stylesheet" href="always_on.css">
<link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default -->
<link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->

    Puis basculer entre eux à l'aide de javascript:

    function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}
    • Que faire si vous avez besoin de dinamically changer la classe d'une valeur récupérées par une requête AJAX? Vous ne pouvez pas créer un fichier CSS maintenant...
    InformationsquelleAutor TRiG
  8. 2

    Comme déjà dit ce n'est pas quelque chose que les navigateurs prennent en charge.

    Si vous n'êtes pas venir avec des styles de manière dynamique (c'est à dire en la tirant d'une base de données ou quelque chose), vous devez être en mesure de contourner ce problème en ajoutant une classe pour le corps de la page.

    Le css devrait ressembler à quelque chose comme:

    a:hover { background: red; }
.theme1 a:hover { background: blue; }

    Et le javascript pour le changer ce serait quelque chose comme:

    //Look up some good add/remove className code if you want to do this
//This is really simplified

document.body.className += " theme1";
    • Par curiosité, est element.classList.add pas bien pris en charge? Je continue à voir des gens faire des element.className +=.
    • classList est une nouvelle caractéristique et ne regarde pas comme il a un bon soutien jusqu'à assez récemment (voir la section caniuse.com/classlist)
    InformationsquelleAutor Nathaniel Reinhart
  9. 1

    De commutation des feuilles de style à l'intérieur est la façon de le faire. Ici, c'est une bibliothèque pour construire les feuilles de style de manière dynamique, de sorte que vous pouvez définir des styles à la volée:

    http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

    InformationsquelleAutor SlappyTheFish
  10. -1

    En jquery, vous pouvez facilement régler passez pseudo classes.

    $("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
    InformationsquelleAutor vasanth
  11. -1

    Si vous utilisez RÉAGIR , Il ya quelque chose appelé radium. Il est donc utile ici :

    • Ajouter des gestionnaires d'accessoires si interactive styles sont spécifiés, par exemple onMouseEnter pour :hover, l'emballage des pilotes de périphériques si nécessaire

    • Si les gestionnaires sont déclenchées, par exemple en vol stationnaire, le Radium appels setState la mise à jour de Radium-champ spécifique sur les composants
      d'état de l'objet

    • Sur re-rendre, résoudre les interactive styles qui s'appliquent, par exemple,: hover, par la recherche de l'élément de clé ou une référence dans le Radium spécifiques
      état
    InformationsquelleAutor Abdennour TOUMI
  12. -1

    voici une solution à deux fonctions: addCSSclass ajoute une nouvelle classe css à un document, et toggleClass il tourne sur

    Le montre l'exemple de l'ajout d'une barre de défilement personnalisée à un div

    JS:

    //If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
var add = (arguments.length > 2 ? newState : (elem.className.match(matchRegExp) === null));
elem.className = elem.className.replace(matchRegExp, ''); //clear all
if (add) elem.className += ' ' + theClass;
}
function addCSSclass(rules) {
var style = document.createElement("style");
style.appendChild(document.createTextNode("")); //WebKit hack :(
document.head.appendChild(style);
var sheet = style.sheet;
rules.forEach((rule, index) => {
try {
if ("insertRule" in sheet) {
sheet.insertRule(rule.selector + "{" + rule.rule + "}", index);
} else if ("addRule" in sheet) {
sheet.addRule(rule.selector, rule.rule, index);
}
} catch (e) {
//firefox can break here          
}
})
}
let div = document.getElementById('mydiv');
addCSSclass([{
selector: '.narrowScrollbar::-webkit-scrollbar',
rule: 'width: 5px'
},
{
selector: '.narrowScrollbar::-webkit-scrollbar-thumb',
rule: 'background-color:#808080;border-radius:100px'
}
]);
toggleClass(div, 'narrowScrollbar', true);

    HTML:

    <div id="mydiv" style="height:300px;width:300px;border:solid;overflow-y:scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus
a diam volutpat, ullamcorper justo eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit
nec sodales sodales. Etiam eget dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus a diam volutpat, ullamcorper justo
eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit nec sodales sodales. Etiam eget
dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui.
</div>

    InformationsquelleAutor kofifus