document.getElementById(who).style.left; <- gibt es das nicht?

[stuemper]

Hi,
mein Plan: Einen Link erzeugen, der einen <div> 20 pixel nach rechts verschiebt.

Die Funktion:

function movehz(who, leftright)
  {
      links = document.getElementById(who).style.left;

temp2 = parseInt(links);
      temp3 = leftright + temp2;

document.getElementById(who).style.left = temp3;
  };

Der Div:

<div id="navigation" class="navi">
 <a href="javascript:movehz('navigation',20);">... punkt 3 -</a>
</div>

css:

<style type="text/css">

body { background-color: #FFFFFF; font-family: Arial; color: #000000; margin:0px; }

.navi {
              z-index:3;
              position:absolute;
              background-color:#dddddd;
              text-align:right;
              vertical-align:middle; /* warum geht das nicht? */
              width:150px;
              height:350px;
              top:140px;
              left:60px;
           }

</style>

Ich hab kein Plan warum das nicht geht, ich hab schon Experimente mit ...style.backgroundColor und .color erfolgreich durchgeführt, aber das hier bringt mich an meine Grenzen =)
Wer lust hat, kann sich mein gestricktes hier runterladen:
http://www.file-upload.net/download-1309328/div2.html.html
Die Kommentare sind vielleicht hilfreich. Mit einem fest zugewiesenen Wert von "var links" geht es zwar, aber es wird halt immer wieder an die gleiche Stelle geschoben, was nicht mein Ziel ist. Die Funktion ist eigentlich OK, nur es wird kein Wert an die Variable "links" gegeben.

Viel Spass beim Kopfzerbrechen =)
mfg

[Steel]

Hoi!

Die Funktion ist eigentlich OK, nur es wird kein Wert an die Variable "links" gegeben.

Richtig. Weil nix drinsteht in style.left. Das haette ein kleines alert schon demonstriert.

Deine eigentlichen Fragen lauten:
Warum steht da nichts drin obwohl ich doch im CSS was vorgegeben habe?
und
Wie bekomm ich da was rein?

Nun. JS is da etwas doof. Es weiss nichts von deiner CSS Datei. Da style.left nicht definiert wurde ist es leer. Informier dich mal ueber computed style

(http://forum.de.selfhtml.org/archiv/2008/9/t176413/)

[Cheatah]

Hi,

Nun. JS is da etwas doof. Es weiss nichts von deiner CSS Datei.

im Gegenteil. JS ist schlau und weiß, dass es Regeln z.B. aus CSS-Dateien, die das JavaScript sehr wohl kennt, hier nicht zu beachten hat. Die style-Collection ist nun mal eine Repräsentation des style-Attributs.

Cheatah

[stuemper]

Hey, vielen Dank für die Hilfe. Ich habs geschafft das Problem aus der Welt zu schaffen, aber:

Wo ist der Unterschied jetzt genau zwischen diesen beiden Dateien?

http://14mb.de/u/stuemper/div1.html
http://14mb.de/u/stuemper/div3.html

div1.html ändert den Hintergrund und die Schriftfarbe des <div> beim mouseover ohne den schnickschnack den div3.html enthält (mit getComputedStyle() ).

Warum funktioniert das auslesen per document.getElementById() bei div1 und bei div3.html document.getElementById()...style.left nicht?

btw: Sorry für den Webspace mit Werbung, aber ich hab sonst nix jefunden :(

mfg

[molily]

Warum funktioniert das auslesen per document.getElementById() bei div1 und bei div3.html document.getElementById()...style.left nicht?

Er funktioniert nicht! Zumindest nicht auf die Weise, die du dir vorstellst.

Was du da tust: Du legst eine Variable an namens oldbgcol. Der weist du einen Wert zu, indem du .style.backgroundColor abfragst. Diese Eigenschaft liefert dir aber einen leeren String zurück. (Probiere es mal aus: Lass dir die Variable mit alert() ausgeben.) Also könntest du genauso schreiben oldbgcol = "", das hätte genau denselben Effekt.

Wenn du nun die "alte" Farbe wiederherstellst, dann stellst du nicht wirklich die alte Farbe wieder her, denn der String ist wie gesagt leer. Aber indem du .style.backgroundColor = "" notierst (denn darauf läuft es letztlich hinaus), löscht du den vorher gesetzten Inline-Style.

Sprich, die background-color-Formatierung über das style-Objekt ist wieder rückgängig gemacht. Wenn das passiert ist, dann wirken wieder alle anderen Formatierungen, die du mit der style-Zuweisung überschrieben hattest.

Du hast also ohne dein Wissen eine Möglichkeit gefunden, wie du gesetzte Inline-Styles wieder löschen kannst - nämlich indem du einfach .style.backgroundColor = "" notierst.

Also: In dem Fall brauchst du den vorherigen background-color-Wert nicht unbedingt. Wenn du jetzt aber so Sachen machen willst wie in div3.html, brauchst du sehr wohl den vorherigen aktuellen Wert der Eigenschaft "left".

Das sind einfach zwei unterschiedliche Aufgaben, die eine kannst du ohne getComputedStyle lösen, die andere nicht.

Mathias

[stuemper]

Vielen Dank, es hat geklingelt.
Meine Lösung erfüllt also seinen Zweck, funktioniert aber trotzdem nicht korrekt.
Danke für die Infos.
mfg

[ChrisB]

Hi,

links = document.getElementById(who).style.left;

Du kannst die Werte von Style-Eigenschaften ueber element.style nur dann auslesen, wenn sie zuvor bereits ueber element.style, oder per style-Attribut im HTML gesetzt wurden.

document.getElementById(who).style.left = temp3;

Und hier fehlt die Angabe der Einheit, die immer zwingend erforderlich ist, sofern der Wert nicht 0 ist.

vertical-align:middle; /* warum geht das nicht? */

Weil vertical-align per Definition nur fuer inline- und table-cell-Elemente Wirkung zeigen darf.

Wer lust hat, kann sich mein gestricktes hier runterladen:

Stelle bitte zukuenftig direkt zugaengliche Online-Beispiele zur Verfuegung. Kaum jemand hat Lust, sich erst irgendwas runterzuladen und lokal abzuspeichern, um dir bei deinem Problem zu helfen - mache es den Helfern bitte so einfach wie moeglich.

MfG ChrisB