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