Do odczytu pozycji elementu służą właściwości offsetTop i offsetLeft. Podają one współrzędne danego elementu względem elementu nadrzędnego określonego we właściwości offsetParent (nie mylić z parentNode). offsetParent jest ustawiony na najbliższy element nadrzędny, który jest pozycjonowany bezwzględnie (position:absolute), a jeśli nie ma takiego elementu to zawiera referencje do body. Najczęściej właśnie tak jest - ze offsetParent = body, i stad mamy pozycje względem początku dokumentu.

Natomiast wysokość i szerokość można odczytać z właściwości offsetWidth i offsetHeight albo clientWidth i clientHeight. Wartości z prefixem "offset" zawierają wielkość elementu z marginesem i obramowaniem, wartości "client" pomijają margines.

Wszystkie te właściwości są tylko do odczytu, wartości są liczbami całkowitymi podanymi w pixelach.

Aby ustawić pozycje elementu na ekranie trzeba natomiast określić style.position='absolute' oraz style.top i style.left. Przy czym powinniśmy tam podstawić wartość string w pixelach zakończona postfixem "px":

var d=document.getElementById("xxx")

d.style.top =( d.offsetTop + 10) + "px";

Ustawienie rozmiaru elementu dokonujemy przez style.width i style.height - i podobnie wartość, jako string zakończony postfixem px, ale już element nie musi być pozycjonowany bezwzględnie.

Poniżej link do przykładów korzystających z tych funkcjonalności:


http://javascripttutorial.azurewebsites.net/Default.html


Mam nadzieje ze w najbliższym czasie znajdę chwile, żeby bardziej szczegółowo opisać te przykłady. Na razie polecam do własnej analizy.