nicht angemeldet
Per Javascript einem div element eine neue klasse zuweisen
0 
Der Martin
0 1 
Gunnar Bittersmann
Per Javascript einem div element eine neue klasse zuweisen
Hi, ich will einem <div> -Element eine neue Klasse zuweisen:
<div id="xxxxx" class="xxxx1"></div>
zu:
<div id="xxxxx" class="xxxx2"></div>
und das will ich per javascript schaffen.
Und wenn das nicht geht, muss ich das element "xxxx1" mit js verändern, das schaff ich aber auch nicht:
function xxxxx() {
var xxxx = document.getElementById("xxxx1");
if (xxxx.style.width == "600px") {
xxxx.style.width = "100%";
}
else {
xxxx.style.width = "600px";
}
if (xxxx.style.height == "400px") {
xxxx.style.height = "100%";
}
else {
xxxx.style.height = "400px";
}
if (xxxx.style.top == "50%") {
xxxx.style.top = "0";
}
else {
xxxx.style.top = "50%";
}
if (xxxx.style.left == "50%") {
xxxx.style.left = "0";
}
else {
xxxx.style.left = "50%";
}
if (xxxx.style.margin-left = "-300px") {
xxxx.style.margin-left = "0";
}
else {
xxxx.style.margin-left = "-300px";";
}
if (xxxx.style.margin-top = "-200px") {
xxxx.style.margin-top = "0";
}
else {
xxxx.style.margin-top = "-200px";";
}
}
Kann mir einer hier den Fehler verraten, und gibt es dazu auch eine Elegantere Lösung.
Danke
-
Hallo,
ich will einem <div> -Element eine neue Klasse zuweisen:
und das will ich per javascript schaffen.und wo liegt das Problem dabei?
Ciao,
Martin--
Time's an illusion. Lunchtime doubly so.
(Douglas Adams, "The Hitchhiker's Guide To The Galaxy")
-
Also, ich hab jetzt folgendes:
function xxxxx() {
var xxxx = document.getElementByid("xxxx1");
if (xxxx.document.class == "xxxx1") {
xxxx.document.class = "xxxx2";
} else {
xxxx.document.class = "xxxx1";
}
}Nur das Problem ist, das das objekt gleich bleibt
-
@@b4RnY:
nuqneH
Also, ich hab jetzt folgendes:
Und das noch eine halbe Stunde, nachdem die EKKi die Stelle in SELFHTML gezeigt hatte, wo steht, wie es richtig lauten muss?
Vielleicht einfach mal den Links folgen und nachlesen‽
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Ich habs jetzt korigiert, funktioniert aber immer noch nicht:
function xxxxx() {
var xxxx = document.getElementById("xxxx");
if (xxxx.class == "xxxx1") {
xxxx.class = "xxxx2";
} else {
xxxx.class = "xxxx1";
}
}Macht das eigentlich was auswenn man schonmal document.getElementById("xxxx"); im dokument hat
-
@@b4RnY:
nuqneH
Und das noch eine halbe Stunde, nachdem die EKKi die Stelle in SELFHTML gezeigt hatte, wo steht, wie es richtig lauten muss?
Und Der Martin auch. Sry.
Ich habs jetzt korigiert,
Auf halbem Wege stehengeblieben‽ Vielleicht einfach mal den Links folgen und nachlesen‽
Macht das eigentlich was auswenn man schonmal document.getElementById("xxxx"); im dokument hat
Nein, das kannst du aufrufen, so oft du willst. Ist aber nicht sinnvoll, weil nicht performant. Besser ist es, diese aufwändige Operation nur einmal ausführen zu lassen und deren Ergebnis in einer (evtl. globalen?)* Variablen zu speichern.
Ähm, du meintest doch aber nicht etwa, du hättest mehrere Elemente mit der ID "xxxx" in deinem Dokument?
Qapla'
* Gibt’s dafür Haue?
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Ich hab das ganze noch mal in der Form gemacht:
function xxxxx() {
var xxxx = document.getElementById("xxxx1");
if (xxxx.style.width == "600px") {
xxxx.style.width = "100%";
}
else {
xxxx.style.width = "600px";
}if (xxxx.style.height == "400px") {
xxxx.style.height = "100%";
}
else {
xxxx.style.height = "400px";
}if (xxxx.style.top == "50%") {
xxxx.style.top = "0";
}
else {
xxxx.style.top = "50%";
}if (xxxx.style.left == "50%") {
xxxx.style.left = "0";
}
else {
xxxx.style.left = "50%";
}if (xxxx.style.margin-left = "-300px") {
xxxx.style.margin-left = "0";
}
else {
xxxx.style.margin-left = "-300px";";
}if (xxxx.style.margin-top = "-200px") {
xxxx.style.margin-top = "0";
}
else {
xxxx.style.margin-top = "-200px";";
}
}Und ab margin-left gibts probleme, also alles funktioniert bis auf margin-left und margin-top
-
@@b4RnY:
nuqneH
Ich hab das ganze noch mal in der Form gemacht:
Warum zum Geier? Ich hatte dir doch gesagt, dass das Unfug ist.
Und ab margin-left gibts probleme,
Ab Threadbeginn gibt’s Probleme, weil du die gegeben Antworten nicht aufmerksam liest.
Würdest du das tun, dann hättets du schon längst begriffen, dass
(1) eine Eigenschaft in JavaScript nicht 'margin-left' heißen kann. Welche Bedeutung hat wohl das Zeichen '-' in JavaScript?
(2) ein Elementobjekt in JavaScript keine Eigenschaft 'class' hat. Du kannst ihm natürlich eine solche geben*, aber nicht erwarten, damit die Klassenzugehörigkeit des Elements zu ändern.
Kann sein, dass ich mich wiederhole: Vielleicht einfach mal den Links folgen und nachlesen‽
Qapla'
* solltest es aber nicht, da 'class' http://de.selfhtml.org/javascript/sprache/reserviert.htm@title=reserviert ist.
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-
Hallo,
Also, ich hab jetzt folgendes:
[...]
if (xxxx.document.class == "xxxx1")aha, du hast also die Information, die ich dir extra verlinkt habe, nicht einmal gelesen. Wozu mach ich das eigentlich?
Wie kommst du davon abgesehen auf die Idee, das mit getElementById() gefundene Elementobjekt habe eine Eigenschaft namens "document"?
Nur das Problem ist, das das objekt gleich bleibt
Selbstverständlich.
So long,
MartinPS: Sehr originelle Bezeichner hast du übrigens für deine Variablen und Klassen.
--
Das einzige Problem beim Nichtstun: Man weiß nie, wann man damit fertig ist.
-
-
-
Mahlzeit b4RnY,
Hi, ich will einem <div> -Element eine neue Klasse zuweisen:
Dann tu das doch einfach. <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=Du weißt, wie Du auf das jeweilige Element zugreifen kannst?> <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=Du weißt, hinter welcher Eigenschaft sich die Klassenangaben verbergen?> Was genau ist Dein Problem?
if (xxxx.style.margin-left = "-300px") {
xxxx.style.margin-left = "0";
}"Wenn die Eigenschaft 'margin' des Unterobjekts 'style' des Objekts 'xxxx' abzüglich dessen, was in der Variablen 'left' enthalten ist, einen String mit dem Inhalt '-300px' ergibt ..."
Meinst Du, das ist eine sinnvolle Syntax? <http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=Ich denke nicht> ...
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
@@EKKi:
nuqneH
if (xxxx.style.margin-left = "-300px") {
xxxx.style.margin-left = "0";
}"Wenn [Subtraktion] einen String mit dem Inhalt '-300px' ergibt ..."
Wie kommst du darauf, dass hier etwas verglichen wird? ;-)
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Mahlzeit Gunnar Bittersmann,
if (xxxx.style.margin-left = "-300px") {
"Wenn [Subtraktion] einen String mit dem Inhalt '-300px' ergibt ..."
Wie kommst du darauf, dass hier etwas verglichen wird? ;-)
Argl - hast Recht. Aber einem Rechenergebnis etwas zuweisen zu wollen ist auch sportlich ... oder wie würde der Parser in so einem Fall arbeiten? Würde er von xxxx.style.margin das Ergebnis der Zuweisung left = "-300px" abziehen und das Ergebnis vergessen?
Hmmm ... Fragen über Fragen.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Hallo,
if (xxxx.style.margin-left = "-300px")
Wie kommst du darauf, dass hier etwas verglichen wird? ;-)
Argl - hast Recht. Aber einem Rechenergebnis etwas zuweisen zu wollen ist auch sportlich ... oder wie würde der Parser in so einem Fall arbeiten? Würde er von xxxx.style.margin das Ergebnis der Zuweisung left = "-300px" abziehen und das Ergebnis vergessen?nein, weil der Zuweisungsperator '=' schwächer bindet als die restlichen Operatoren. Andernfalls würde ja auch die Anweisung
a = b - c;
bedeuten: Weise a den Wert von b zu, subtrahiere dann den Wert von c, und wirf schließlich das Ergebnis weg. Der hier vorliegende Fall
a - b = c;
heißt also wirklich: Berechne die Differenz von a und b, und weise ihr den Wert von c zu. Da aber (a-b) kein L-Value[1] ist (die gekünstelte Übersetzung "Linkswert" ist auch blöd), kann keine Zuweisung ausgeführt werden.
Hmmm ... Fragen über Fragen.
Wieder eine weniger, hoffe ich ...
Ciao,
Martin[1] L-Value ist mir aus C geläufig und bezeichnet einen Ausdruck, der eine Speicher-Referenz darstellt (also eine Variable oder einen dereferenzierten Zeiger) und daher auf der linken Seite einer Zuweisung stehen kann.
--
Die letzten Worte des Polizisten:
Ich hab mitgezählt, Leute: Sechs Schuss, jetzt hat er keine Munition mehr!
-
@@EKKi:
nuqneH
oder wie würde der Parser in so einem Fall arbeiten?
Nicht.
Es sei denn, man nennt auch schon die Quittierung eines Fehlers Arbeit.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
@@b4RnY:
nuqneH
Hi, ich will einem <div> -Element eine neue Klasse zuweisen:
Dazu hat dir EKKi ja schon die entsprechende Stelle in SELFHTML genannt.
if (xxxx.style.width == "600px") {
xxxx.style.width = "100%";
}
else {
xxxx.style.width = "600px";
}Dafür würde sich besser die http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=Kurzschreibweise anbieten:
xxxx.style.width = (xxxx.style.width == "600px") ? "100%" : "600px";Allerdings bietet es sich nicht an, mit JavaScript Style-Eigenschaften zu ändern. Besser ist die Trennung von Präsentation (CSS) und Verhalten (JavaScript). [Meiert]
Also alle Darstellungsangaben im Stylesheet, keine im Script. Im Script werden allenfalls Klassennamen verändert, so wie du es ursprünglich vorhattest.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)