Thomas Meinike: CSS-Klasse per Javascript überschreiben

Beitrag lesen

SELF-Forum

CSS-Klasse per Javascript überschreiben

Thomas Meinike
+1 Informationen zu den Bewertungsregeln

Hallo,

Nehmen wir an, ich habe in der Klasse

.roterText {color: #ff0000}

vor, den roten Text in blau abzuändern.

Probiere es ueber die document.styleSheets-Collection:

  
function ChangeCSSRules(sel,prop,val)  
{  
  var styleobj;  
  
  if(document.styleSheets)  
  {  
    if(document.styleSheets.item(0).rules)styleobj=document.styleSheets.item(0).rules; // IE  
    else if(document.styleSheets.item(0).cssRules)styleobj=document.styleSheets.item(0).cssRules; // Moz  
  }  
  
  if(styleobj)styleobj.item(sel).style[prop]=val;  
}

...

  
<p class="roterText" onclick="ChangeCSSRules('roterText','color','#00F')">Text</p>

Der Austausch von Klassennamen ueber className ist allerdings praktikabler und wird von den aktuellen Browsern besser unterstuetzt.

Eine Alternative zur Zuweisung von Style-Eigenschaften bietet die Methode setProperty():

if(styleobj)styleobj.item(sel).style.setProperty(prop,val,"");

Wichtig ist hier der dritte Parameter (die Prioritaet, die meistens ein Leerstring ist, aber auch important sein kann). Firefox unterstuetzt diese Methode (auch im SVG-Kontext).

MfG, Thomas

Beitrag melden
+1
Informationen zu den Bewertungsregeln