How to use measurement and location properties in quirks mode

Article
10/10/2017

Measurement and location values do not have to be static integers. They can be scripted values based on distances and dimensions of other elements, expressed lengths (as in more traditional media) or equations. When working with several elements, you can use the measurement of one element to set the location of another.

You can use the measurement and location properties discussed in this overview to construct more complex creations. For example, to center an element within its container, set its left coordinate to the sum of one-half the width of its container minus one-half the width of the element. The syntax is demonstrated in the following example.

<script>
function center(oNode){
   var oParent=oNode.parentElement;
   oNode.style.left=oParent.offsetWidth/2 - oNode.offsetWidth/2;
}
</script>
<div id="odiv"
   onclick="center(this)"
   style="position: absolute;">
   Click Here To Center
</div>

While the DHTML DOM provides an easy way to obtain the current dimensions and location of an element, you must use cascading style sheet to set these values in most cases. Except for elements that expose height and width properties, such as img and table, you can use various cascading style sheet attributes to set the size of an element. While many properties return values in pixels, you can use some cascading style sheet properties with specific length units, such as inches or centimeters.

The following example moves the H1 element 1 inch every time the user clicks the element:

<script>
function moveMe(){
   // Move the object by one inch.
   oHeader.style.posLeft+=1;
   oHeader.style.posTop+=1;
}
</script>
<h1 id="oHeader"
   style="position: absolute; top: 1in; left: 1in;"
   onclick="moveMe()">
   Header
</h1>

When moving elements to specific locations in a document, you sometimes have to account for the different properties of the box element. The values of height and width properties include border and padding measurements. Moving one element to the visible corner of another element is relatively easy using the offset properties and techniques described in the preceding example. However, when positioning an element at a specific point in the content of another positioned element, you must include the size of the padding and border. You can use either the client properties or the padding and border properties to establish a location within the content of an element.

The following example shows three different ways to position an element within the content of another element. First, cascading style sheet border and padding properties are used to move an element to the content within a positioned element. Next, DHTML offset and client properties are used to move an element within the content of a positioned element without accounting for the padding.

<script>
function fnMove1(){
   // Method 1: Use only CSS properties
   var iTop1=odiv.style.pixelTop +
      parseInt(odiv.style.border-top-width) + 
      parseInt(odiv.style.paddingTop);
   var iLeft1=odiv.style.pixelLeft + 
      parseInt(odiv.style.border-left-width) + 
      parseInt(odiv.style.padding-left);
   oMarker.style.top=iTop1;
   oMarker.style.left=iLeft1;
}
function fnMove2(){
   // Method 2: Use DHTML properties.
   var iTop2=odiv.offsetTop + odiv.clientTop;
   var iLeft2=odiv.offsetLeft + odiv.clientLeft;
   oMarker.style.top=iTop2;
   oMarker.style.left=iLeft2;
}
function fnMove3(){
   // Method 3: Use DHTML, CSS, and a TextRectangle.
   var aRects=odiv.getClientRects();
   var oRect=aRects[0];
   var oBnd=odiv.getBoundingClientRect();
   oMarker.style.top=oBnd.top + 
      parseInt(odiv.style.paddingTop) + 
      parseInt(odiv.style.border Top);
   oMarker.style.left=oBnd.left + 
      parseInt(odiv.style.padding-left) + 
      parseInt(odiv.style.border-left);;   
}
</script>

<div id="odiv" style="position: absolute; top: 150px; 
  left: 50px; border: 10px outset; padding: 10px; 
  width: 250px; height: 250px; background-color: #EFEFEF;">
Move marker here.
</div>

<span id="oMarker" style="top: 200px; left: 200px; 
  position: absolute; border: 2px outset; 
  background-color: #CFCFCF;">
      Marker
</span>

<input type="button" value ="CSS" onclick="fnMove1()">
<input type="button" value ="DHTML" onclick="fnMove2()">
<input type="button" value ="TextRectangle" onclick="fnMove3()">

How to use measurement and location properties in quirks mode

See also

Concepts

Additional resources