Per Javascript einem div element eine neue klasse zuweisen

[b4RnY]

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

[Der Martin]

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

[b4RnY]

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

[Gunnar Bittersmann]

@@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'

[b4RnY]

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

[Gunnar Bittersmann]

@@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?

[b4RnY]

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

[Gunnar Bittersmann]

@@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.

[Der Martin]

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,
 Martin

PS: Sehr originelle Bezeichner hast du übrigens für deine Variablen und Klassen.

[EKKi]

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

[Gunnar Bittersmann]

@@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'

[EKKi]

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

[Der Martin]

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.

[Gunnar Bittersmann]

@@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'

[Gunnar Bittersmann]

@@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'