nicht angemeldet
Style Änderung per ID
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>
-
Hi,
for(var i = 0; i < document.getElementById("lol").length; i++) {
document.getElementById("lol")[i].style.border = "solid red 10px";Da id-Werte eindeutig sein müssen, liefert getElementById immer höchstens ein Element zurück - weder length noch Indizierung sind also sinnvoll.
Du willst alle Kind-Elemente des gefundenen Elements beackern.
Also solltest Du dessen Unterobjekt childnodes (siehe http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes) näher betrachten.cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Salü
Du willst alle Kind-Elemente des gefundenen Elements beackern.
Also solltest Du dessen Unterobjekt childnodes (siehe http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes) näher betrachten.Ich habe das angeschaut.
Leider komme ich nicht weiter.
Ich weiss nicht, wie und wo ich nun diese "childnodes" in mein Skript integrieren soll.Kannst du mir das helfen?
Peter
-
Hallo,
Ich weiss nicht, wie und wo ich nun diese "childnodes" in mein Skript integrieren soll.
Bleibe einfach bei der Ausgangsvariante mit getElementsByTagName("p"), weil es via childNodes nicht einfacher wird:
function setCSS() {
var a,c,d;
d=document.getElementById("lol");
c=d.childNodes;
a=c.length;
for(var i = 0; i < a; i++)
{
if(c[i].nodeType==1 && c[i].tagName.toLowerCase()=="p")c[i].style.border = "solid red 10px";
}
}MfG, Thomas
-
Hallo,
Nachtrag zu:
Bleibe einfach bei der Ausgangsvariante mit getElementsByTagName("p"), ...
Das sieht dann mit ID so aus:
function setCSS() {
var a,c,d;
d=document.getElementById("lol");
c=d.getElementsByTagName("p");
a=c.length;
for(var i = 0; i < a; i++)c[i].style.border = "solid red 10px";
}MfG, Thomas
-
-
-
-
Hi,
Leider geht das nicht.
DOM weiß, dass es jede ID nur ein einziges Mal geben darf. Die entsprechende Methode liefert also keine Collection zurück, also gibt es nichts mit einem Index.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Salü
DOM weiß, dass es jede ID nur ein einziges Mal geben darf. Die entsprechende Methode liefert also keine Collection zurück, also gibt es nichts mit einem Index.
Danke für den Hinweis.
Aber leider komme ich so nicht weiter.
Kannst du mir auch sagen, wie du das lösen würdest?Ich kenne Javascript leider noch nicht allzulange...
Gruss, Peter
-