offsetTop/Left wie bekommich offsetRight/Bottom

[BlueFox]

offsetTop/Left wie bekomm ich offsetRight/Bottom

Tach,

Titel sagt eigentlich alles, will den wert von style.top/left/right/bottom haben und das geht numal nur mit offset

 

[ein schlauer]

bottom ist top + height
right ist left + width

 

[BlueFox]

Hä?

mit offsetLeft/Top bekomme ich den wert von style.left/top, also die position, wie soll das mit

bottom ist top + height
right ist left + width

gehn?

 

[Junkee[]]

offsetTop + offsetHeight

 

[BlueFox]

Bei mir kommen da keine 0px sondern die Größe von dem div

 

[kkapsner]

offsetParent.clientHeight - offsetHeight - offsetTop.

 

[BlueFox]

Geht auch nicht. Ich beschreibe mal besser mein Problem:
Ich will nen Fade effekt auf einem div machen das von ausen nach innen fadet, also wenn das Objekt 50px Groß ist, dann also -50px style.bottom ist, und dann von -50px bis 0px fadet.

 

[kkapsner]

Ja... und was ist jetzt das Problem?

parseInt(NODE.style.bottom);

 

[BlueFox]

Ja hab ich auch schon gemacht dann kommt NaN zurück

 

[kkapsner]

alert(parseInt("-50px"));

 

[tsseh]

- Doppelpost -

 

[tsseh]

irgendwie verstehe ich das problem nicht ganz. das thema sollte doch mit der 1. antwort erledigt worden sein?!
wobei man mit offsetLeft/Top eben genau nicht den wert von style.left/top bekommt. auch bekommt man style.left/top nur, wenn diese gesetzt wurden(über css oder js).
aber egal, wenn ich left/top relativ oder absolut habe und dazu die höhe/breite, sollte man doch bottom/right relativ oder absolut ausrechnen können

 

[BlueFox]

Und wie?
css:

body {
	margin: 0px;
}

#box {
	background: #000;
	position: absolute;
	bottom: -50px;
	width: 300px;
	height: 50px;
}

js:

function move(objID) {
	var obj = document.getElementById(objID);
	alert( parseInt(obj.style.bottom) );
}

Kommt NaN zurück.

1. antwort erledigt worden sein?!

Nö woher denn das geht ja nicht.

 

[tsseh]

Und wie?
css:
...
Kommt NaN zurück.

ok, dann halt nur per js, man kommt über style eben nicht immer an die werte ran. deswegen geht man ja auch über offsetTop/Left.

Nö woher denn das geht ja nicht.

aber sicher, warum soll das nicht gehen?

 

[BlueFox]

aber sicher, warum soll das nicht gehen?

Ja wie denn? Komme mit dem Schreiben nicht klar.

 

[tsseh]

ich verstehe dich nicht. so wären die werte wie man sie idR. benötigt. willst du right/bottom jetzt noch in bezug zum eltern-element, musst du noch dessen right/bottom bestimmen.

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div style="position:absolute;left:10px;width:10px;top:100px;height:100px"><div id="box" style="position:relative;left:10px;width:10px;top:100px;height:100px">xxx</div></div>
    <script type="text/javascript">
      function getX(obj)
      {
        var nX;
        var object;
        nX = 0;
        object = obj;
        while (object.offsetParent != null)
        {
          nX += object.offsetLeft;
          object = object.offsetParent;
        }
        nX += object.offsetLeft;
        return nX;
      }
      
      function getY(obj)
      {
        var nY;
        var object;
        nY = 0;
        object = obj;
        while (object.offsetParent != null)
        {
          nY += object.offsetTop;
          object = object.offsetParent;
        }
        nY += object.offsetTop;
        return nY;
      }
      function test()
      {
        var box = document.getElementById("box");
        
        alert("rel. L: " + box.offsetLeft + " - rel. R: " + (box.offsetLeft + box.offsetWidth));
        alert("rel. T: " + box.offsetTop + " - rel. B: " + (box.offsetTop + box.offsetHeight));
        
        alert("abs. L: " + getX(box) + " - abs. R: " + (getX(box) + box.offsetWidth));
        alert("abs. T: " + getY(box) + " - abs. B: " + (getY(box) + box.offsetHeight));
      }
      
      window.onload = test;
    </script>
  </body>
</html>

 

[BlueFox]

Hm?
der Code hilft mir iwie auch nicht!?
Ich will doch nur, das was man mit offsetLeft/Top bekommt auch mit offsetRight und Bottom bekommt, wenn das div bottom: 0px; soll auch 0px kommen, wenn bottom: -50px; ist soll auch -50px kommen. das wird aber nicht gemacht.

 

[kkapsner]

Mann BlueFox: Bist du nie auf die Idee gekommen dir mal NODE.style.bottom ausgeben zu lassen?
Und du hättest auch sagen können, dass das DIV direkt im body liegt - dann musst du natürlich anstatt node.parentNode, document.documentElement nehmen.

 

[tsseh]

Mann BlueFox: Bist du nie auf die Idee gekommen dir mal NODE.style.bottom ausgeben zu lassen?

jetzt verstehe ich dich auch nicht. da steht nicht immer ein wert, sondern nur, wenn du diesen mit js setzt (ich dachte zwar auch noch, wenn dieser über css gesetzt wird, dem ist aber - seiner aussage nach - nicht so, dass glaube ich jetzt aber erst mal, bzw. ist es auch egal, weil nicht immer ein wert dort steht und man deswegen diesen nicht verwenden kann)

Und du hättest auch sagen können, dass das DIV direkt im body liegt - dann musst du natürlich anstatt node.parentNode, document.documentElement nehmen.

???

die echte relative/absolute position bekommt man siehe antwort 1 vom schlauen.
will man die angaben aus dem css, muss man diese auslesen. wozu ist mir dann allerdings unklar.
http://www.quirksmode.org/dom/changess.html

EDIT: wobei ich vielleicht nochmal wiederholen sollte, dass man mit offsetLeft/Top eben NICHT die werte für style.left/top bekommt. aber das ist vielleicht auch nicht dein problem, welches ich auch noch nicht verstanden habe.

 

[kkapsner]

In node.style stehen die Werte drin, die per inline-Style gesetzt werden (oder eben mit JS). Wenn man über ein zentrales CSS setzt (sei es über eine Datei oder im head) muss man hald den Weg über currentStyle bzw. computedStyle gehen. Das sollte man erkennen, wenn man sich per alert einfach mal node.style.bottom ausgeben ließe und merkt, dass da nichts drin steht, obwohl das Element ja per CSS richtig positioniert ist. (und dass parseInt("") == NaN ist ja hinlänglich bekannt).
Mit dem Ansatz von Schlauen bekommt man wunderbar die Koordinaten der rechten, unteren Ecke ABER vom normalen Koordinatenursprung (der linken, oberen Ecke). Das ist bei diesem Problem aber wenig hilfreich, das man gerne einen anderen Koordinatenursprung hätte (die rechte, untere Ecke). Dazu muss man eine recht einfache (Translation und Drehung um 180°) Koordinatentransformation durchführen. Die Drehung ist gar kein Problem... einfach ein Minus vor alles und fertig. Die Translation ist an sich auch nicht schwer (den Translationsvektor einfach nur addieren), wenn man genau wüsste, wohin man verschieben will. Das bekommt man im "normalen" Fall duch node.offsetParent.offsetHeight/Width - aber nicht so bei Objekten, die relativ zum Viewport positioniert werden. Hier muss man die entsprechende Dimension des Anzeigefensters nehmen - und das ist nunmal in den meisten Browsern document.documentElement.clientHeight/Width (oder window.innerHeight/Width - aber dazu gibt es ja Skripte wie Sand am Meer).