SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to determine an element's width and height?

    I need to determine an element's width and height in pixels (not including padding, border, and margin) in Javascript. The element will not have width or height styles specified.

    In Mozilla, I know I can use document.defaultView.getComputedStyle() to do this.

    IE does not support document.defaultView.getComputedStyle(). It supports offsetWidth/offsetHeight, but those include the padding and border. IE also supports element.currentStyle.width and element.currentStyle.height, but those are returning "auto" instead of the actual numbers.

    Opera supports document.defaultView.getComputedStyle(), but it is buggy as it is returning the element's width including the padding and border. Opera also supports offsetWidth/offsetHeight, but those also include the padding and border.

    Does anyone know how I can get an element's width and height (the actual pixel number values) without the padding and border in IE and Opera?

  2. #2
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could subtract the padding/border from clientWidth/clientHeight
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I experimented with it a little. This works as long as padding and border use pixel units in the CSS. I tested on Win2K with Opera7, Mozilla1.5, and IE6.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Get CSS Width and Height</title>
    <style type='text/css'>
    #d1 {
      position:absolute;
      left:300px; top:300px;
      width:auto; height:auto;
      margin:0; padding:1px .2em .2em 1px;
      border:1px solid #000;
      color:#000; background:#ccc;
    }
    </style>
    <script type='text/javascript'>
    
    var oTA, oD1;
    
    window.onload = function()
    {
      oTA = document.getElementById('ta');
      oD1 = document.getElementById('d1');
    }
    
    function xGetCssWidth(ele)
    {
      var pl=0,pr=0,bl=0,br=0;
      
      pl=xGetComputedStyle(ele,'padding-left');
      pr=xGetComputedStyle(ele,'padding-right');
      bl=xGetComputedStyle(ele,'border-left-width');
      br=xGetComputedStyle(ele,'border-right-width');
    
      // debug
      var s = 'xGetCssWidth('+ele.id+') = ' + (ele.offsetWidth - (pl+pr+bl+br)) + '\n';
      s += 'offsetWidth: ' + ele.offsetWidth + '\n';
      s += 'padding-left: ' + pl + '\n';
      s += 'padding-right: ' + pr + '\n';
      s += 'border-left-width: ' + bl + '\n';
      s += 'border-right-width: ' + br + '\n---\n';
      oTA.value += s;
      // end debug
      
      return ele.offsetWidth - (pl+pr+bl+br);
    }  
    
    function xGetCssHeight(ele)
    {
      var pt=0,pb=0,bt=0,bb=0;
      
      pt = xGetComputedStyle(ele,'padding-top');
      pb = xGetComputedStyle(ele,'padding-bottom');
      bt = xGetComputedStyle(ele,'border-top-width');
      bb = xGetComputedStyle(ele,'border-bottom-width');
    
      // debug
      var s = 'xGetCssHeight('+ele.id+') = ' + (ele.offsetHeight - (pt+pb+bt+bb)) + '\n';
      s += 'offsetHeight: ' + ele.offsetHeight + '\n';
      s += 'padding-top: ' + pt + '\n';
      s += 'padding-bottom: ' + pb + '\n';
      s += 'border-top-width: ' + bt + '\n';
      s += 'border-bottom-width: ' + bb + '\n---\n';
      oTA.value += s;
      // end debug
      
      return ele.offsetHeight - (pt+pb+bt+bb);
    }
    
    function xGetComputedStyle(oEle, sProp)
    {
      var p = 0;
      if(document.defaultView && document.defaultView.getComputedStyle){
        p = document.defaultView.getComputedStyle(oEle,'').getPropertyValue(sProp)
      }
      else if(oEle.currentStyle) {
        // convert css name to property name for IE (can this be done with RE?)
        var a = sProp.split('-');
        sProp = a[0];
        for (var i=1; i<a.length; ++i) {
          c = a[i].charAt(0);
          sProp += a[i].replace(c, c.toUpperCase());
        }   
        p = oEle.currentStyle[sProp];
      }
      return parseInt(p) || 0;
    }
    </script>
    </head>
    <body>
    <h1>Get CSS Width and Height</h1>
    
    <form onsubmit='return false'>
    <textarea id='ta' rows='20' cols='50'></textarea>
    <p><button onclick='xGetCssWidth(oD1)'>CSS Width of 'd1'</button></p>
    <p><button onclick='xGetCssHeight(oD1)'>CSS Height of 'd1'</button></p>
    <p><input type='reset' /></p>
    </form>
    
    <h2>CSS</h2>
    <pre>
    #d1 {
      position:absolute;
      left:300px; top:300px;
      width:auto; height:auto;
      margin:0; padding:1px .2em .2em 1px;
      border:1px solid #000;
      color:#000; background:#ccc;
    }
    </pre>
    
    <div id='d1'>This is 'd1'</div>
    
    <h2>Conclusion</h2>
    <p>This works as long as padding and border use pixel units in the CSS.</p>
    </body>
    </html>
    Last edited by MikeFoster; Dec 15, 2003 at 02:11.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, Mike. Unfortunately my padding value is specified in em units, as there is text within the element and I want the padding to be proportional to the text size.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •