SitePoint Sponsor

User Tag List

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

    How to detect the width of an element?

    How do I determine the width of an element (such as DIV or A) on a page using Javascript?

  2. #2
    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)
    The following shows the basic steps you need to take. Note that if the element is not a block element you may get inconsistent results.
    Code:
    function getWidth(eleID)
    {
      var w = 0, ele = null;
      // Get a reference to the element object
      if (document.getElementById) {
        ele = document.getElementById(eleID);
      }
      else {
        if (document.all) ele = document.all[eleID];
      }  
      if (ele) {
        // Get the element's width
        if (typeof(ele.offsetWidth) != 'undefined') {
          w = ele.offsetWidth;
        }
        else if (ele.style) {
          w = parseInt(ele.style.width);
        }
      }
      return w;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code, it seems to work great! I do have a couple of questions below...

    Quote Originally Posted by MikeFoster
    The following shows the basic steps you need to take. Note that if the element is not a block element you may get inconsistent results.
    Code:
    function getWidth(eleID)
    {
      var w = 0, ele = null;
      // Get a reference to the element object
      if (document.getElementById) {
        ele = document.getElementById(eleID);
      }
      else {
        if (document.all) ele = document.all[eleID];
      }
    I tested this in IE 5.5, Opera 7.22, and Mozilla 1.5. Using document.getElementById(...) worked in all of them, but document.all[...] only worked in IE and Opera. Is there any reason to have the document.all[...] code in there? Do any browsers support document.all[...] but not document.getElementById(...)?


    Quote Originally Posted by MikeFoster
    Code:
      if (ele) {
        // Get the element's width
        if (typeof(ele.offsetWidth) != 'undefined') {
          w = ele.offsetWidth;
        }
        else if (ele.style) {
          w = parseInt(ele.style.width);
        }
      }
      return w;
    }
    The ele.offsetWidth code worked in IE, Opera, and Mozilla. Why would I ever need the ele.style.width code?

    I just want to make my code as simple as possible, and not have anything that isn't necessary. Thanks for all your help.

  4. #4
    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 think document.getElementById was first supported in IE5.0. For IE4 you'll need to use document.all. Opera can emulate the IE object model (to a certain extent).

    My code just shows the general technique of testing for the existence of the object you want, before using it. If the object doesn't exist then fall back on something else if possible. Actually I don't know if there are any browsers which support element.style but not element.offsetWidth. Be aware that offsetWidth and style.width will not be the same value - depending on whether the browser is in standards-compliance mode (ref: css box model).

    For reference have a look at the following, which even supports NN4 and Opera5:
    Code:
    function xWidth(e,uW) {
      if(!(e=xGetElementById(e))) return 0;
      if (xNum(uW)) { // v3.13.1
        if (uW<0) uW = 0;
        else uW=Math.round(uW);
      }
      else uW=0;
      var css=xDef(e.style);
      if(css && xDef(e.offsetWidth) && xStr(e.style.width)) {
        if(uW) xSetCW(e, uW);
        uW=e.offsetWidth;
      }
      else if(css && xDef(e.style.pixelWidth)) {
        if(uW) e.style.pixelWidth=uW;
        uW=e.style.pixelWidth;
      }
      else if(xDef(e.clip) && xDef(e.clip.right)) {
        if(uW) e.clip.right=uW;
        uW=e.clip.right;
      }
      return uW;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually element.style.width doesn't return anything for me under IE, Opera, or Mozilla, so I guess offsetWidth is the way to go. Thanks for your help.


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
  •