nicht angemeldet
css-klasse dynamisch ändern
Hallo
Ist es möglich, ein Attribut (z. B. Farbe) einer css-klasse dynamisch zu ändern? Ich möchte konkret im folgenden Beispiel alle Substantive rot machen (aber erst nach einer User-interaktion):
Die <span class="substantiv">Möve</span> ist ein <span class="substaniv">Vogel</span>.
Klar, ich könnte jedem span eine id geben und mit document.getElementById(...).style.color="red" alle einzeln verändern, aber das scheint mir zu umständlich.
Any ideas? thx
Didosa
-
Hallo,
Ist es möglich, ein Attribut (z. B. Farbe) einer css-klasse dynamisch zu ändern? Ich möchte konkret im folgenden Beispiel alle Substantive rot machen (aber erst nach einer User-interaktion):
Die <span class="substantiv">Möve</span> ist ein <span class="substaniv">Vogel</span>.
Eine Moeglichkeit ist die Vorhaltung von zwei Klassen (etwa substantiv1 und substantiv2) und deren dynamischer Tausch, z. B. mit der Funktion getElementsByClassName() von http://www.styleassistant.de/tips/tip100.htm.
Eine andere ist der dynamische Zugriff auf einzelne CSS-Eigenschaften ueber die document.styleSheets-Collection (das Finden der Regeln realisiert rules fuer den IE bzw. cssRules fuer Mozilla). Hier mal ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 01/03</title>
<style type="text/css">
<!--.substantiv
{
color: #00C;
background-color: #EEE;
}-->
</style>
<script language="JavaScript" type="text/javascript">
<!--function changeClassProperty(classname,prop,val)
{
var rules,docstyle=document.styleSheets.item(0);
if(docstyle.rules)rules=docstyle.rules;
if(docstyle.cssRules)rules=docstyle.cssRules;
var rl=rules.length;for(var i=0;i<rl;i++)
{
if(rules.item(i).selectorText=="."+classname)rules.item(i).style[prop]=val;
}
}//-->
</script>
</head>
<body>
<span class="substantiv">Möve</span> ist ein <span class="substantiv">Vogel</span>.
<br>
<a href="javascript:changeClassProperty('substantiv','color','#F00')">Test</a>
</body>
</html>MfG, Thomas
-
Cool, herzlichsten Dank!
Didosa
-
-
Hallo Didosa,
Klar, ich könnte jedem span eine id geben und mit document.getElementById(...).style.color="red" alle einzeln verändern, aber das scheint mir zu umständlich.
Du kannst mit JavaScript immer nur auf den HTML-Baum zugreifen, nicht auf zentrale CSS-Definitionen. Aber zum Glueck gibt es for-Schleifen in JavaScript. Du definierst einfach zentral in CSS eine Alternativklasse, z.B. zur Klasse .rot eine Alternativklasse .blau. Und dann klapperst du in einer for-Schleife alle HTML-Elemente von body an ab, fragst mit if ab, ob sie die Klasse "rot" haben, und aenderst diese in "blau". Dabei beachten, die Eigenschaft className zu benutzen! Siehe auch http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#universaleigenschaften.
viele Gruesse
Stefan Muenz -
Salute
Die <span class="substantiv">Möve</span> ist ein <span class="substaniv">Vogel</span>.
Daß die Möwe sich mit w schreibt, hat sich wohl noch nicht bis nach PISA rumgesprochen....
SCNR ;-)
Der Toscaner....