clientWidth and clientHeight Properties

calendar October 31, 2009

Value: integer
Compatibility: WinIE4+, MacIE4+, NN7, Moz1+, Safari1+

These two properties by and large reveal the pixel height and width of the content within an element whose stylesheet rule includes height and width settings. In theory , these measures do not take into account any margins, borders or padding that you add to an element by way of stylesheets. In practice different combinations of borders , margins and padding influence these values in unexpected ways.

For the document.body object the clientwidth and clientheight properties return the inside width and height of the window or frame.

Code:

<html>
 <head>
 <title>clientWidth and clientHeight properties</title>
 <script type="text/javascript">
 function displayLogo()
 {
   var pWidth = document.getElementById("mydiv").clientWidth;
   var pHeight = document.getElementById("mydiv").clientHeight;
   //correct for Windows/Mac discrepancies
   var pTop = (document.getElementById("mydiv").clientTop) ?
               document.getElementById("mydiv").clientTop :
               document.getElementById("mydiv").offsetTop;
   var logoWidth = document.getElementById("logo").style.pixelWidth;
  //center logo horizontally against paragraph
  document.getElementById("logo").style.pixelLeft = (pWidth - logoWidth) / 2;
  //position image immediately below end of paragraph
  document.getElementById("logo").style.pixelTop = pTop + pHeight;
  document.getElementById("logo").style.visibility = "visible";
 }
 </script>
 </head>
 <body>
 <button onClick="displayLogo()">Position and show logo art</button>
 <div id="logo" style="position:absolute;width:120px;visibility:hidden">
 <img src="logo.gif" />
 </div>
 <div id="mydiv" style="width:200px;">
 <p>From the valley of the shadows
 Into the darkness beyond
 Feel the calling of pleasures
 Overshadow man's emptiness
 My guiltiness bleeds internally
 Inside tunnels of blocked emotions
 The silent screams within my inner being
 Bursting forth in desperation</p>
 </div>
 </body>
 </html>

To assist in the vertical positioning of the logo, the offsetTop property of the div object provides the position of the start of the div with respect to its outer container (body).

admin Javascript

Leave a Reply

You must be logged in to post a comment.