如何计算元素的宽度/高度? [英] How do I calculate an element's width/height?

查看:101
本文介绍了如何计算元素的宽度/高度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要在Javascript中确定元素的宽度和高度(以像素为单位)(不包括

填充,边框和边距)。元素不会有宽度

或指定的高度样式。


在Mozilla中,我知道我可以使用document.defaultView.getComputedStyle()来做

这个。


IE不支持document.defaultView.getComputedStyle()。它支持

offsetWidth / offsetHeight,但那些包括填充和边框。 IE也是

支持element.currentStyle.width和element.currentStyle.height,但那些

正在返回auto而不是实际的数字。


Opera支持document.defaultView.getComputedStyle(),但它有点错误,因为它是b / b $ b $返回元素的宽度包括填充和边框。 Opera也

支持offsetWidth / offsetHeight,但那些还包括填充和

边框。


有谁知道我怎么做在IE和Opera中没有填充和边框的情况下获取元素的宽度和高度(实际像素值= b $ b数值)?

解决方案

de*******@no.spam.com 写道:

我需要在Javascript中确定元素的宽度和高度(以像素为单位(不包括填充,边框和边距)。




然后我担心你的需求仍然无法满足。没有可靠的方法来做你所要求的



-

William Tasso - http://WilliamTasso.com


William Tasso写道:

de ******* @ no.spam.com 写道:

我需要在Javascript中确定元素的宽度和高度(以像素为单位(不包括填充,边框和边距)。



然后我担心你的需求仍然没有实现。没有可靠的方法来做你要求的事。




ElementRef.clientWidth和ElementRef.clientHeight将返回宽度

和高度(以像素为单位),不包括MSIE 6中的填充,边框和边距

Windows,NS 7.x,Mozilla 1.2 +,Opera 7.x,K-meleon 0.7+等近期

浏览器(如Safari 1.x,Konqueror 3.x等)。

如果OP正在寻找内容的尺寸,那么

ElementRef.scrollWidth和ElementRef.scrollHeight还会在最近的浏览器中返回

内容的宽度和高度(以像素为单位)。

http://msdn.microsoft.com/workshop/s...easurement.htm

(仅适用于MSIE 5+以及向后兼容的渲染模式)

http://msdn.microsoft.com/workshop/g...s/dhtmlpos.gif

http://msdn.microsoft.com/workshop/s...ew/measure.htm

(仅适用于MSIE 5+以及向后兼容的渲染模式)


DU


< blockquote>周一,2003年12月15日星期一09:43:43 -0500,据报道DU已经声明:

William Tasso写道:

de*******@no.spam.com 写道:

我需要在Javascript中确定元素的宽度和高度(以像素为单位)(不包括填充,边框和边距)。



然后我担心你的需求仍未实现。没有可靠的方法来做你要求的事。



ElementRef.clientWidth和ElementRef.clientHeight将返回宽度
和高度(以像素为单位),不包括填充,边框在Windows,NS 7.x,Mozilla 1.2 +,Opera 7.x,K-meleon 0.7+和其他最近的浏览器(如Safari 1.x,Konqueror 3.x)的MSIE 6和边距,等等。)




我认为威廉更多地暗示了很多人已经禁用Javascript的事实。客户端脚本本质上是不可靠的。


-

Mark Parnell
http://www.clarkecomputers.com.au


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?

解决方案

de*******@no.spam.com 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.

--
William Tasso - http://WilliamTasso.com


William Tasso wrote:

de*******@no.spam.com 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/s...easurement.htm
(Will only work for MSIE 5+ and in backward compatible rendering mode)

http://msdn.microsoft.com/workshop/g...s/dhtmlpos.gif

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

DU


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

William Tasso wrote:

de*******@no.spam.com 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


这篇关于如何计算元素的宽度/高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆