nicht angemeldet
Hallo
Ich fand bei SELFHTML (http://de.selfhtml.org/javascript/objekte/style.htm) diesen Code:
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function setCSS() {
for(var i = 0; i < document.getElementsByTagName("p").length; i++) {
document.getElementsByTagName("p")[i].style.border = "solid red 10px";
document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
document.getElementsByTagName("p")[i].style.color = "#FFFFFF";
document.getElementsByTagName("p")[i].style.fontSize = "36pt";
}
}
//-->
</script>
</head><body>
<p>Absatz</p>
<p>zweiter Absatz</p>
<p>dritter Absatz</p>
<p><a href="javascript:setCSS()">Stylesheet-Power!</a></p>
</body></html>
So werden beim Klick auf den Link die Styles geändert.
Ich will eigentlich genau das erreichen, jedoch nicht per Tag-Name sondern per ID. D.h. dass ich eine Definition in einer Klasse ändern kann. Ich versucht es, indem ich getElementById nahm und das "p" durch die Klasse ersetzt habe.
Leider geht das nicht.
Kann mir das jemand helfen?
Peter
PS.: So habe ich probiert:
<html><head><title>Test</title>
<style type="text/css">
div#lol p {
border: solid blue 10px;
}
</style>
<script type="text/javascript">
<!--
function setCSS() {
for(var i = 0; i < document.getElementById("lol").length; i++) {
document.getElementById("lol")[i].style.border = "solid red 10px";
}
}
//-->
</script>
</head><body>
<div id="lol">
<p>Absatz</p>
<p>zweiter Absatz</p>
<p>dritter Absatz</p>
<p><a href="javascript:setCSS()">Stylesheet-Power!</a></p>
</div>
</body></html>