Positioning Properties

This page presents a summary of the various event, element, and document properties that are used when positioning items dynamically on a page. When you move the icon (id="ICONDRAG") around the division (id="DIVDRAG") within the body (id="BODY") of the page, these properties are updated in the table below. You can also move the division itself around the screen.

<div id="DIVDRAG" style="position:absolute; top:230; left:450;
width:120; height:120; border-style:solid; border-width:1; cursor:hand;
background-color:#F0BA90">

  <img id="ICONDRAG" src="icon1.gif" style="position:absolute; left:10;
  top:10; width:32; height:32; cursor:hand"/>

</div>

Cursor Properties
event.offsetX,
event.offsetY		   Coordinates of mouse pointer within the element
event.clientX,
event.clientY		   Coordinates of mouse pointer within the window or frame
event.x,
event.y		   Coordinates of mouse pointer within container
event.screenX,
event.screenY		   Coordinates of mouse pointer within the screen
Element Properties
event.srcElement   Reference to element that fired event
element.id   ID of element that fired event
element.offsetLeft,
element.offsetTop		   Left and top coordinates of element relative to container element
element.offsetWidth,
element.offsetHeight		   Width and height of element
element.clientWidth,
element.clientHeight		   Width and height of element less border, margin, and padding
element.style.pixelWidth,
element.style.pixelHeight		   Width and height of element in integer pixel units (for calculation)
element.style.posLeft,
element.style.posTop		   Width and height of element in any specified unit of measurement (for calculation)
element.style.width,
element.style.height		   Width and height of element as string values
element.style.pixelLeft,
element.style.pixelTop		   Left and top coordinates of element relative to container element in integer pixel units (for calculation)
element.style.posLeft,
element.style.posTop		   Left and top coordinates of element relative to container element in any specified unit of measurement (for calculation)
element.style.left,
element.style.top		   Left and top coordinates of element relative to container element as string values
Parent Properties
element.parentElement   Next outermost containing element
element.parentElement.id   ID of next outermost containing element
element.offsetParent.id   ID of next outermost containing element
element.offsetLeft,
element.offsetTop		   Left and top coordinates of parent element
Document Properties
document.body.scrollLeft,
document.body.scrollTop		   Pixel distance of document scroll