Thomas Meinike: Wie kann ich auf css klassen zugreifen

Beitrag lesen

Hallo,

Danke das bringt mich schon ein wenig weiter, aber eine direktes Ansprechen ohne über html tags zu gehen weist du auch nicht?

Man kann ueber das DOM durchaus auch auf einzelne Eigenschaften einer CSS-Klasse zugreifen. Im folgenden Beispiel gibt es die Klasse xyz, die einem p-Element zugewiesen wird. Im JavaScript-Teil wird die document.styleSheets-Collection angesprochen (hier das erste CSS im Dokument [item(0)] und dessen mit "xyz" benannte Regel [item("xyz")], also die Klasse). Mozilla kennt das Unterobjekt rules, der IE dagegen cssRules.

Das Script gibt den Wert des Selektors aus, danach den Wert der color-Eigenschaft und setzt color schließlich auf #000.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 10/02</title>
<style type="text/css">
<!--
.xyz
{
  color: #00C;
  background-color: #FFC;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function ChangeCSSRules()
{
  // IE
  if(document.styleSheets.item(0).rules)
  {
    alert(document.styleSheets.item(0).rules.item("xyz").selectorText);
    alert(document.styleSheets.item(0).rules.item("xyz").style.color);
    document.styleSheets.item(0).rules.item("xyz").style.color="#000";
  }

// Mozilla
  if(document.styleSheets.item(0).cssRules)
  {
    alert(document.styleSheets.item(0).cssRules.item("xyz").selectorText);
    alert(document.styleSheets.item(0).cssRules.item("xyz").style.color);
    document.styleSheets.item(0).cssRules.item("xyz").style.color="#000";
  }
}
//-->
</script>
</head>
<body onload="ChangeCSSRules()">
<p class="xyz">Text</p>
</body>
</html>

MfG, Thomas