La modification d'une règle CSS-ensemble de Javascript

Question

Est-il possible d'apporter des modifications à une règle CSS-définir dynamiquement (c'est à dire certains JS pour changer une règle CSS-set lorsque l'utilisateur clique sur un widget)

Cette règle CSS est appliqué à beaucoup d'éléments (par l'intermédiaire d'un sélecteur de classe) sur la page et je souhaite le modifier lorsque l'utilisateur clique sur le widget, de sorte que tous les éléments ayant le changement de classe.

Answer 1

Vous pouvez, mais c'est plutôt lourde. La meilleure référence sur la façon de faire est l'article suivant: Totalement Pwn CSS avec Javascript.

J'ai réussi à le faire fonctionner avec Firefox et IE - je ne pouvais pas dans Chrome, mais il semble qu'il prend en charge les méthodes du DOM.ricosrealm rapports qu'il fonctionne dans Chrome, trop.

Answer 2

L'Api pour l'édition des feuilles de style avec JS sont, malheureusement, pas compatible sur tous les navigateurs. Le YUI feuille de style Utilitaire tente de gommer ces différences de sorte que vous pouvez simplement utiliser que. Vous pouvez aussi regarder le code source pour comprendre comment il fonctionne si vous ne souhaitez pas utiliser YUI lui-même.

Answer 3

En fonction de ce que vous essayez d'atteindre, une meilleure solution pourrait être de modifier/ajouter une classe à un élément contenant (corps de la faire!), et de définir des classes en conséquence.

.yourclass { color: black }
#wrapper.foo .yourclass { color: red }
#waraper.bar .yourclass { color: blue }

ensuite, vous pouvez simplement utiliser

document.getElementById('wrapper').className='foo';

(ou de votre choix js cadre du wrapper pour les mêmes) pour tout changer avec la classe yourclass à l'intérieur quelle que soit votre wrapper élément.

((entre parenthèses) est-il un moyen pour arrêter la SORTE formateur d'assumer des trucs de départ avec un # est un commentaire?)

Answer 4

Alors qu' setAttribute est sympa, il y a un niveau moyen de faire cela dans la plupart des navigateurs:

htmlElement.className = 'someClass';

Faire sur de nombreux éléments, vous aurez besoin d'un navigateur croix de solution:

function getElementsByClassName( className, context, tagName ) {
  context = context || document;
  if ( typeof context.getElementsByClassName === 'function' )
    return context.getElementsByClassName( className );

  if ( typeof context.getElementsByTagName !== 'function' )
    return [];

  var elements = typeof tagName === 'string' ? context.getElementsByTagName( tagName ) :
    context.getElementsByTagName('*'),
  ret = [];
  for ( var i = 0, il = elements.length; i < il; i++ )
    if ( elements[ i ].className.match( className ) )
      ret.push( elements[ i ] );

  return ret;
}

var elements = getElementsByClassName('someClass');

for ( var i = 0, il = elements.length; i < il; i++ )
  elements[ i ].className = 'newClass';

Vous pouvez remplacer la ligne:

if ( elements[ i ].className.match( className ) )

Avec une certaine Expression Régulière, mais vous aurez à échapper les caractères spéciaux dans ce cas.