web-dev-qa-db-fra.com

Définition de règles de pseudo-classe CSS à partir de JavaScript

Je cherche un moyen de changer les règles CSS pour les sélecteurs de pseudo-classes (tels que: link,: hover, etc.) à partir de JavaScript.

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

Je n'ai pu trouver la réponse nulle part ailleurs. si quelqu'un sait que c'est quelque chose que les navigateurs ne supportent pas, ce serait également un résultat utile.

javascriptcsspseudo-class
117
user39882

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

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

#elid:hover { background: red; }

en supposant que chaque élément que vous souhaitez affecter à un identifiant unique permettant de le sélectionner.

En théorie, le document que vous souhaitez utiliser est http://www.w3.org/TR/DOM-Level-2-Style/Overview.html , ce qui signifie que vous pouvez (à partir d'un fichier incorporé ou lié existant feuille de style) en utilisant une syntaxe comme:

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

IE nécessite bien sûr sa propre syntaxe:

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

Les navigateurs plus anciens et mineurs ne prendront probablement en charge aucune des deux syntaxes. Il est rarement fait de falsifier une feuille de style dynamique, car il est assez ennuyeux d’être juste, rarement nécessaire et historiquement gênant.

181
bobince

J'ai jeté ensemble un petite bibliothèque pour cela car je pense qu'il existe des cas d'utilisation valables pour manipuler des feuilles de style dans JS. Les raisons étant:

  • Définir des styles à calculer ou à récupérer - par exemple, définir la taille de police préférée de l'utilisateur à partir d'un cookie.
  • Définition de styles comportementaux (et non esthétiques), en particulier pour les développeurs de widgets/plugins d'interface utilisateur. Les onglets, les carrousels, etc. nécessitent souvent des CSS de base pour fonctionner. Ils ne devraient pas exiger une feuille de style pour la fonction principale.
  • Mieux que les styles en ligne car les règles CSS s'appliquent à tous les éléments actuels et futurs et n'encombrent pas le code HTML lors de l'affichage dans Firebug/Developer Tools.
29
David Tang

Une fonction pour gérer le contenu inter-navigateur:

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);
    }
  }
};
16
Scott Gamon

Mon astuce utilise un sélecteur d'attribut. Les attributs sont plus faciles à configurer en 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)"> ...
6
Sergio Abreu

Il suffit de placer le fichier css dans une chaîne de modèle.

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

Créez ensuite un élément de style, placez la chaîne dans la balise de style et associez-la au document.

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

La spécificité se chargera du reste. Ensuite, vous pouvez supprimer et ajouter des balises de style de manière dynamique. C'est une alternative simple aux bibliothèques et à la manipulation du tableau de feuilles de style dans le DOM. Bon codage!

6
tangle sites

Il y a une autre alternative. Au lieu de manipuler directement les pseudo-classes, créez des classes réelles qui modélisent les mêmes choses, comme une classe "survolée" ou une classe "visitée". Style les classes avec le "." Habituel. syntaxe, puis vous pouvez utiliser JavaScript pour ajouter ou supprimer des classes d’un élément lorsque l’événement approprié est déclenché.

5
Brandon Ramirez

Au lieu de définir directement des règles de pseudo-classes avec javascript, vous pouvez les définir différemment dans différents fichiers CSS, puis utiliser Javascript pour désactiver une feuille de style et en activer une autre. Une méthode est décrite à A List Apart (qv. Pour plus de détails).

Configurez les fichiers CSS en tant que,

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

Et puis basculez entre eux en utilisant 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;
     }
   }
}
3
TRiG

Comme déjà indiqué, ce n'est pas quelque chose que les navigateurs supportent.

Si vous ne proposez pas les styles de manière dynamique (c.-à-d. En les extrayant d'une base de données ou quelque chose du genre), vous devriez pouvoir contourner ce problème en ajoutant une classe au corps de la page.

Le css ressemblerait à quelque chose comme:

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

Et le javascript pour changer cela 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";
2
Nathaniel Reinhart

Commuter les feuilles de style est la meilleure façon de le faire. Voici une bibliothèque pour créer des feuilles de style de manière dynamique, vous permettant ainsi de définir des styles à la volée:

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

1
SlappyTheFish