How to use measurement and location properties in strict 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 print media), equations, or percentages. 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 elements. For example, to center an element within its container, set the 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:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Strict//EN">
<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>

Expressions are formula-derived values. You can use expressions to continually update property values. In the preceding example, the element is centered once, but does not remain centered if the browser window is resized. The following example uses a formula instead of a static value to preserve layout:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Strict//EN">
<script>
function center(oNode){
   oNode.style.setExpression("left","getCenter(this)");
}
function getCenter(oNode){
   var oParent=oNode.parentElement;
   return (oParent.offsetWidth/2 - oNode.offsetWidth/2);
}
</script>
<div id="odiv"
   onclick="center(this)"
   style="position: absolute;">
   Click Here To Center
</div>

Although the DHTML Document Object Model (DOM) provides an easy way to obtain the current dimensions and location of an element, you should use a cascading style sheet to set these values in most cases. Except for elements that expose height and width properties, such as the IMG element and the TABLE element, you can use various cascading style sheet properties 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 one inch every time the user clicks the element:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Strict//EN">
<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 margin, border, and padding properties of the element. Moving one element to the visible corner of another element is relatively easy using the offset properties and techniques described in the preceding example.

The following example shows three different ways to position an element within the content of another element. First, cascading style sheet pixel, 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:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 strict//EN" "http://www.w3.org/tr/html4/strict.dtd"> 
<html>
<body>
<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()">

One method of preserving layout is to use percentages to regulate element dimensions. The following example depicts a conventional layout that is made extensible by the use of percentages:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Strict//EN">
 <html><head><title>Fixed Positioning Example</title><style type="text/css">     
    body {height=640px; width=480px;} 
      #logoBar  {position: fixed; width: 99.15%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; border: solid;}
      #leftSide {position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 50px; left: 0; border: solid;}
      #main     {position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 50px; left: 10em; border: solid;}
      #footer   {position: fixed; width: 99.15%; height: 50px; top: auto; right: 0; bottom: 0; left: 0; border: solid;} 
    </style></head>
<body>
<div id="logoBar">...logobar...</div>
    <div id="leftSide">...leftside...</div>
    <div id="main">...main...</div>
    <div id="footer">...footer...</div> 
    </body></html>

When you use percentages, the elements can be actively resized depending on the dimensions of the content area. In the preceding example, the fixed positioning attributes keep their relative positions intact.

How to use measurement and location properties in strict mode

See also

Concepts

Additional resources