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

[delerious]

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?

 

[William Tasso]

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.

 

[DU]

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

 

[Mark Parnell]

Sometime around Mon, 15 Dec 2003 09:43:43 -0500, DU is reported to have
stated:

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.

 

[DU]

Sometime around Mon, 15 Dec 2003 09:43:43 -0500, DU is reported to have
stated:



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

 

[William Tasso]

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...

quite so, consequently further explanation is, at best, unnecessary and
potentially confusing,

YMMV - and obviously does.

 

[delerious]

Thank you for your response, DU. I will investigate this later tonight.

 

[delerious]

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.

 

[DU]

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

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.

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.

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

 

[delerious]

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).

 

[DU]

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

 

[@SM]

(e-mail address removed) 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

 

[delerious]

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

 

[DU]

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

 

[delerious]

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?