nicht angemeldet
Wie kann ich auf css klassen zugreifen
hallo zusammen,
also ich hab hier so einen css button definiert und würde gerne mit javascript änderungen an der formattierung durchführen. Gibt es da noch eine andere Lösung auf die klasse .button zuzugreifen wie mit id versehene blöcke?
<style ..
.button a
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
text-align:center;
width:70px;
height:47px;
background-color:#AAAAAA;
color:black;
padding:10px;
text-decoration:none;
border-style:none;
border-width:thin;
border-color:black
}
.button a:link
{
background-color:#AAAAAA;
color:black;
}
.button a:visited
{
background-color:#AAAAAA;
color:black;
}
.button a:hover
{
background-color:yellow;
color:black;
font-size:18px;
font-weight:bold;
}
</style..
<body>
...
<b class="button"><a href="back.html">BACK</a></b>
...
Kann ich nicht direkt irgendwie auf die klasse .button zugreifen ohne id???
-
Hallo,
<b class="button"><a href="back.html">BACK</a></b>
...Kann ich nicht direkt irgendwie auf die klasse .button zugreifen ohne id???
document.getElementsByTagName("b")[0].className="xyz";
aendert die Klasse des ersten b-Elements.
MfG, Thomas
-
Danke das bringt mich schon ein wenig weiter, aber eine direktes Ansprechen ohne über html tags zu gehen weist du auch nicht?
mfg GonZo
-
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
-
-