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

Question

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.

Answer 1

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 ce qui signifie que vous pouvez (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';

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

Answer 2

J'ai jeté une petite bibliothèque pour ce , 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 pour la fonction ne devrait pas exiger 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.

Answer 3

Mon astuce est d'utiliser un sélecteur d'attributs. 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)"> ...  

Answer 4

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.