How do I calculate an element's width/height?

Discussion in 'Javascript' started by delerious@no.spam.com, Dec 14, 2003.

  1. Guest

    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?
    , Dec 14, 2003
    #1
    1. Advertising

  2. DU Guest

    William Tasso wrote:

    > wrote:
    >
    >>I need to determine an element's width and height in pixels (not
    >>including padding, border, and margin) in Javascript.

    >
    >
    > Then I fear your needs will remain unfulfilled. There is no reliable way to
    > do what you ask.
    >


    ElementRef.clientWidth and ElementRef.clientHeight will return the width
    and height in pixels excluding padding, border and margin in MSIE 6 for
    Windows, NS 7.x, Mozilla 1.2+, Opera 7.x, K-meleon 0.7+ and other recent
    browsers (like Safari 1.x, Konqueror 3.x, etc.).
    If the OP is looking for the content's dimensions, then
    ElementRef.scrollWidth and ElementRef.scrollHeight will also return the
    content's width and height in pixels in recent browsers.

    http://msdn.microsoft.com/workshop/samples/author/css/overview/interactivemeasurement.htm
    (Will only work for MSIE 5+ and in backward compatible rendering mode)

    http://msdn.microsoft.com/workshop/graphics/dhtmlpos.gif

    http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/measure.htm
    (Will only work for MSIE 5+ and in backward compatible rendering mode)

    DU
    DU, Dec 15, 2003
    #2
    1. Advertising

  3. Mark Parnell Guest

    Sometime around Mon, 15 Dec 2003 09:43:43 -0500, DU is reported to have
    stated:
    > William Tasso wrote:
    >> wrote:
    >>>I need to determine an element's width and height in pixels (not
    >>>including padding, border, and margin) in Javascript.

    >>
    >> Then I fear your needs will remain unfulfilled. There is no reliable way to
    >> do what you ask.

    >
    > ElementRef.clientWidth and ElementRef.clientHeight will return the width
    > and height in pixels excluding padding, border and margin in MSIE 6 for
    > Windows, NS 7.x, Mozilla 1.2+, Opera 7.x, K-meleon 0.7+ and other recent
    > browsers (like Safari 1.x, Konqueror 3.x, etc.).


    I think William was hinting more at the fact that many people have
    Javascript disabled. Client side scripting in its essence is unreliable.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Dec 15, 2003
    #3
  4. DU Guest

    Mark Parnell wrote:

    > Sometime around Mon, 15 Dec 2003 09:43:43 -0500, DU is reported to have
    > stated:
    >
    >>William Tasso wrote:
    >>
    >>> wrote:
    >>>
    >>>>I need to determine an element's width and height in pixels (not
    >>>>including padding, border, and margin) in Javascript.
    >>>
    >>>Then I fear your needs will remain unfulfilled. There is no reliable way to
    >>>do what you ask.

    >>
    >>ElementRef.clientWidth and ElementRef.clientHeight will return the width
    >>and height in pixels excluding padding, border and margin in MSIE 6 for
    >>Windows, NS 7.x, Mozilla 1.2+, Opera 7.x, K-meleon 0.7+ and other recent
    >>browsers (like Safari 1.x, Konqueror 3.x, etc.).

    >
    >
    > I think William was hinting more at the fact that many people have
    > Javascript disabled.


    I did not interpret his post in such manner. I read it again and still
    did not see a lot of specifics, details, explanations, references...

    Client side scripting in its essence is unreliable.
    >


    According to various sources, about 8% to 15% surf with javascript
    disabled.

    http://www.upsdell.com/BrowserNews/res_design.htm#d02

    For the other 85% to 92%, the DHTML object model properties given will
    work in recent browsers. So I think the given answer will work in a wide
    majority of time, much more often than it will fail.

    DU
    DU, Dec 15, 2003
    #4
  5. Guest

    Thank you for your response, DU. I will investigate this later tonight.
    , Dec 15, 2003
    #5
  6. Guest

    On Mon, 15 Dec 2003 09:43:43 -0500, DU <> wrote:
    >ElementRef.clientWidth and ElementRef.clientHeight will return the width
    >and height in pixels excluding padding, border and margin in MSIE 6 for
    >Windows, NS 7.x, Mozilla 1.2+, Opera 7.x, K-meleon 0.7+ and other recent
    >browsers (like Safari 1.x, Konqueror 3.x, etc.).


    Here is what I am seeing:

    In Mozilla 1.5 and IE 5.5 (I don't have IE6 installed): element.clientHeight
    and element.clientWidth both return 0.

    In Opera 7.23: element.clientHeight and element.clientWidth return the height
    and width including the padding but excluding the border.


    >If the OP is looking for the content's dimensions, then
    >ElementRef.scrollWidth and ElementRef.scrollHeight will also return the
    >content's width and height in pixels in recent browsers.


    Here is what I am seeing:

    In Mozilla 1.5 and IE 5.5: element.scrollWidth and element.scrollHeight return
    the width and height including the padding and border.

    In Opera 7.23: element.scrollWidth returns the width including the padding and
    border. element.scrollHeight returns the height including the top padding and
    top border but excluding the bottom padding and bottom border (or it includes
    the bottom padding/border and excludes the top padding/border, I don't know
    for sure, but either way, this appears to be a bug).


    So it looks like there is still no way to get an element's width excluding
    padding and border in IE and Opera.
    , Dec 16, 2003
    #6
  7. DU Guest

    wrote:
    > On Mon, 15 Dec 2003 09:43:43 -0500, DU <> wrote:
    >
    >>ElementRef.clientWidth and ElementRef.clientHeight will return the width
    >>and height in pixels excluding padding,


    I got this wrong: clientWidth and clientHeight properties include
    padding and scrollbar(s) (if present) but not border nor margin.

    border and margin in MSIE 6 for
    >>Windows, NS 7.x, Mozilla 1.2+, Opera 7.x, K-meleon 0.7+ and other recent
    >>browsers (like Safari 1.x, Konqueror 3.x, etc.).

    >
    >
    > Here is what I am seeing:
    >
    > In Mozilla 1.5 and IE 5.5 (I don't have IE6 installed)


    MSIE 5.5 does not comply with the CSS1 box model; if you define a css
    width of, say, 150px, then it will include padding and border. MSIE 6
    corrects this implementation only if you trigger standards compliant
    rendering mode.

    : element.clientHeight
    > and element.clientWidth both return 0.
    >


    Too bad you did not post the code by which you saw this. Also I think
    you should have explained for what purpose you needed to figure out
    these values. An url would have been fine.

    I get values for clientWidth and clientHeight for Mozilla 1.6beta, NS
    7.1 (based on Mozilla 1.4), K-meleon 0.8.1 and MSIE 6 for windows and
    these values are correct and converge: I make sure I trigger standards
    compliant rendering mode for MSIE 6. The only small difference I see is
    in the width of the vertical scrollbar (and the height of the horizontal
    scrollbar): in Mozilla it's 15px while MSIE 6 it's 16px for the windows
    classic theme and 18px for the XP theme. Note that scrollbar dimension
    is settable in XP Pro and windows 2000 and there is no way to access
    this value: this will affect MSIE 5+ and Opera 7.x but not Mozilla-based
    browsers where the scrollbar is "fixed" at 16px.

    > In Opera 7.23: element.clientHeight and element.clientWidth return the height
    > and width including the padding but excluding the border.
    >
    >


    Opera 7.23 will include scrollbar(s) dimension (if present) too in the
    calculation of clientWidth and clientHeight.

    >
    >>If the OP is looking for the content's dimensions, then
    >>ElementRef.scrollWidth and ElementRef.scrollHeight will also return the
    >>content's width and height in pixels in recent browsers.

    >
    >
    > Here is what I am seeing:
    >


    Again, I do not see the code you use to reach your conclusions. <shrug>

    > In Mozilla 1.5 and IE 5.5: element.scrollWidth and element.scrollHeight return
    > the width and height including the padding and border.
    >


    Not over here. Just content and padding.

    > In Opera 7.23: element.scrollWidth returns the width including the padding and
    > border.


    Yes. There is for sure a bug here.

    element.scrollHeight returns the height including the top padding and
    > top border but excluding the bottom padding and bottom border (or it includes
    > the bottom padding/border and excludes the top padding/border, I don't know
    > for sure, but either way, this appears to be a bug).
    >


    I don't see this but there is a bug for sure in Opera 7's handling of
    scrollWidth/scrollHeight.

    What is "element" in your testcase? An inline element or a block-level
    element? Is your markup and css code valid? Can you post an url showing
    your code?

    >
    > So it looks like there is still no way to get an element's width excluding
    > padding and border in IE and Opera.
    >


    I can not reach your conclusion without seeing specifics, details,
    implementation, your code, etc..
    In the final analysis, you can set an element's width: this way you can
    get it in a reliable way. Many CSS1 box model hacks (to go around MSIE
    5.x css1 box model faulty implementation) work more or less that way:
    they first figure out if the browser complies with the CSS1 box model
    and then they adjust accordingly the measurements of width/height so
    that the rendering will be identical in MSIE 5.x, MSIE 6 and other browsers.

    DU
    DU, Dec 16, 2003
    #7
  8. Guest

    Here is a link to a test page which shows what I stated earlier:
    http://home.comcast.net/~delerious1/index7.html


    And here is what I stated earlier:

    In Mozilla 1.5 and IE 5.5 (I don't have IE6 installed): element.clientHeight
    and element.clientWidth both return 0.

    In Opera 7.23: element.clientHeight and element.clientWidth return the height
    and width including the padding but excluding the border.

    In Mozilla 1.5 and IE 5.5: element.scrollWidth and element.scrollHeight return
    the width and height including the padding and border.

    In Opera 7.23: element.scrollWidth returns the width including the padding and
    border. element.scrollHeight returns the height including the top padding and
    top border but excluding the bottom padding and bottom border (or it includes
    the bottom padding/border and excludes the top padding/border, I don't know
    for sure, but either way, this appears to be a bug).
    , Dec 16, 2003
    #8
  9. DU Guest

    wrote:

    > Here is a link to a test page which shows what I stated earlier:
    > http://home.comcast.net/~delerious1/index7.html
    >
    >
    > And here is what I stated earlier:
    >
    > In Mozilla 1.5 and IE 5.5 (I don't have IE6 installed): element.clientHeight
    > and element.clientWidth both return 0.
    >


    I'll have to examine your test page furthermore later (I don't have time
    right now) and do some testings but I can already assure you that
    Bugzilla bugfile 227567 is closely related to the findings you get. (see
    comments 5 and 8; I have a bug also dependent on 227567):
    http://bugzilla.mozilla.org/show_bug.cgi?id=227567#c5
    Your anchor is declared as a block element while your <div> is abs.
    pos.: these situations are not usual situations (I mean more complex).
    Btw, your local style should be declared in the <head>, not that it
    interferes with your code, but...

    DU


    > In Opera 7.23: element.clientHeight and element.clientWidth return the height
    > and width including the padding but excluding the border.
    >
    > In Mozilla 1.5 and IE 5.5: element.scrollWidth and element.scrollHeight return
    > the width and height including the padding and border.
    >
    > In Opera 7.23: element.scrollWidth returns the width including the padding and
    > border. element.scrollHeight returns the height including the top padding and
    > top border but excluding the bottom padding and bottom border (or it includes
    > the bottom padding/border and excludes the top padding/border, I don't know
    > for sure, but either way, this appears to be a bug).
    >
    DU, Dec 16, 2003
    #9
  10. @SM Guest

    a ecrit :
    >
    > So it looks like there is still no way to get an element's width excluding
    > padding and border in IE and Opera.


    And the borders or padding or margin can't be known ?
    If they can ==> operate on them, no ?

    Vive les css !

    -- -----
    @SM
    move away *OTEZ-MOI* from my reply url
    @SM, Dec 17, 2003
    #10
  11. Guest

    Do you know if there is a way obtain an element's width/height including the
    padding and border in IE6 standards-compliant mode?
    , Dec 17, 2003
    #11
  12. DU Guest

    wrote:

    > Do you know if there is a way obtain an element's width/height including the
    > padding and border in IE6 standards-compliant mode?
    >



    Yes. offsetWidth and offsetHeight. But it will also include scrollbar(s)
    width or height if it(they) is(are) present. If you look at the MSDN
    references material I gave you in my first post, you'll see this and it
    is the same in standards compliant rendering mode.

    DU
    DU, Dec 17, 2003
    #12
  13. Guest

    On Wed, 17 Dec 2003 08:33:32 -0500, DU <> wrote:
    >Yes. offsetWidth and offsetHeight. But it will also include scrollbar(s)
    >width or height if it(they) is(are) present. If you look at the MSDN
    >references material I gave you in my first post, you'll see this and it
    >is the same in standards compliant rendering mode.


    Oh OK. I mistakenly thought that offsetWidth/offsetHeight wouldn't include
    padding/border in IE6 standards-compliant mode.

    Then is there a way to obtain a element's width/height without padding/border
    in IE6 standards-compliant mode?
    , Dec 17, 2003
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    768
    Bruce Barker
    Oct 10, 2005
  2. Replies:
    14
    Views:
    13,785
  3. Lois
    Replies:
    1
    Views:
    3,221
    Ryan Stewart
    Dec 27, 2004
  4. cera
    Replies:
    1
    Views:
    1,265
    Neredbojias
    Aug 18, 2007
  5. Bernd Meier
    Replies:
    6
    Views:
    509
    GTalbot
    Jan 14, 2008
Loading...

Share This Page