[Javascript] Measuring Element Dimension and Location

[Håkan Magnusson]

Depending on the box model used and how you define "width" and "height", 
the values you'll need to determine the width or height of an element 
can be found in offsetWidth/offsetHeight and a few lookups in the style 
collection of the element.

Luckily, the way to get the dimensions are fairly similar in both 
Internet Explorer and Mozilla, provided you can determine the box model. 
Basically, it depends on if/which doc type you are using. Answer me that 
and I can tell you how to get the correct values.

You should also check up on some box model documentation. Stick to w3 
recommendations and do hacks for IE where you have to. That way, your 
code will work in years to come (hopefully). Naturally, you will have to 
look up msdn or other resources when you make adjustments for all 
browsers, but sticking to standards where you can is always good.

http://www.w3.org/TR/CSS2/box.html


H

Paul Novitski wrote:
> Thanks, Peter.  Although the surface information was what I'd already 
> seen, you led me to this page that summarizes all the dimension 
> properties in one neat diagram:
> 
> http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp 
> 
> 
> Paul
> 
> 
> 
> At 12:04 PM 2/11/2004, you wrote:
> 
>> >From a rather IE-centric viewpoint:
>>
>> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wid
>> th_2.asp
>>
>> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/off
>> setwidth.asp
>>
>> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/pix
>> elwidth.asp
>>
>> -Peter
>>
>> -----Original Message-----
>> From: javascript-bounces at LaTech.edu
>> [mailto:javascript-bounces at LaTech.edu] On Behalf Of Paul Novitski
>>
>> Dave,
>>
>> I can see your perspective and agree with it in certain contexts,
>> although
>> in other cases I want to delegate table-rendering to the browser -- I
>> just
>> want to be able to go in after the fact, read cell widths accurately,
>> and
>> tweak them programmatically.
>>
>> I'm still looking for illumination on the differences between the
>> .width,
>> .offsetWidth, and .pixelWidth values.  Can anyone explain or send me to
>> a
>> good resource?
>>
>> Thanks,
>>
>> Paul
>>
>> At 10:54 AM 2/11/2004, David Lovering wrote:
>> >I am also of the "fixed" column width school. After all, it is the
>> >variation between browsers that causes "creep" and border boundaries to
>>
>> >wiggle about when viewing tables of variable content.  Also, this
>> >approach neatly dispenses with the ghastly "splines" that packages like
>>
>> >Fireworks/FrontPage churn out, requiring literally thousands of niggly
>> >files to complete a web page.  (Ugh!)  The only caution I would care to
>>
>> >add is to make sure that the physical dimensions of an element are
>> >sufficient to house the largest allowable content for it.  [This is
>> >where validation can serve two purposes].
>> >
>> >-- Dave Lovering
>>
>>
>> _______________________________________________
>> Javascript mailing list
>> Javascript at LaTech.edu
>> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
>