JS Offsetheight offsetwidth Commentary

ScrollHeight: Gets the scroll height of the object.

ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window

ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window

ScrollWidth: Gets the scrolling width of the object

Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property

Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property

OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property

Event.clientx horizontal coordinates of relative documents

Event.clienty vertical coordinates of relative documents

Event.offsetx horizontal coordinates relative to the container

Event.offsety the vertical coordinate of the relative container

Document.documentElement.scrollTop The vertical scrolling value

Event.clientx+document.documentelement.scrolltop horizontal coordinates of relative documents + amount of vertical scrolling

The above mainly refers to IE, Firefox differences are as follows:

IE6.0, ff1.06+:

clientwidth = width + padding

clientheight = height + padding

offsetwidth = width + padding + border

offsetheight = height + padding + border

ie5.0/5.5:

ClientWidth = Width-border

ClientHeight = Height-border

offsetwidth = width

offsetheight = height

(Need to mention: the Margin property in CSS, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)

Test code:

CODE:

[Copy to Clipboard]

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "[url=http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd]http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd[/url] ">

<title> Code Examples: Test comparison of ClientWidth, Offsetwidth, clientheight, offsetheight </title>

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>

<meta name= "Author" content= "Maple rock, [email protected]" >

<meta name= "Copyright" content= "[Url=http://www.cnlei.com]http://www.cnlei.com[/url]"/>

<meta name= "description" content= "Test comparison of ClientWidth, Offsetwidth, clientheight, offsetheight"/>

<style type= "Text/css" media= "All" >

body {font-size:14px;}

a,a:visited {color: #00f;}

#Div_CnLei {

width:300px;

height:200px;

padding:10px;

border:10px solid #ccc;

Background: #eee;

font-size:12px;

}

#Div_CnLei p {margin:0;padding:10px;background: #fff;}

</style>

<script type= "Text/javascript" >

function OBJ (s) {

return document.getElementById (s)? document.getElementById (s): s;

}

function Getclientwidth (o) {

return OBJ (o). clientwidth;

}

function Getclientheight (o) {

return OBJ (o). clientheight;

}

function Getoffsetwidth (o) {

return OBJ (o). offsetwidth;

}

function Getoffsetheight (o) {

return OBJ (o). offsetheight;

}

</script>

<body>

<p> Click on the link below:</p>

<div id= "Div_cnlei" >

<p><a href=http://bbs.chinaunix.net/"Javascript:alert (getclientwidth (' Div_cnlei '));" >getclientwidth ();</a> <a href=http://bbs.chinaunix.net/"Javascript:alert (GetClientHeight (' Div_CnLei ‘));" >getclientheight ();</a></p>

<p><a href=http://bbs.chinaunix.net/"Javascript:alert (getoffsetwidth (' Div_cnlei '));" >getoffsetwidth ();</a> <a href=http://bbs.chinaunix.net/"Javascript:alert (GetOffsetHeight (' Div_CnLei ‘));" >getoffsetheight ();</a></p>

</div>

<div id= "Description" >

<p><strong>ie6.0, ff1.06+:</strong><br/>

clientwidth = width + padding = 300+10x2 = 320<br/>

clientheight = height + padding = 200+10x2 = 220<br/>

offsetwidth = width + padding + border = 300+10x2+10x2= 340<br/>

offsetheight = height + padding + border = 200+10x2+10x2 = 240</p>

<p><strong>ie5.0/5.5:</strong><br/>

clientwidth = Width-border = 300-10x2 = 280<br/>

clientheight = Height-border = 200-10x2 = 180<br/>

offsetwidth = width = 300<br/>

offsetheight = height = 200</p>

</div>

</body>

HTML control offsettop, ScrollTop, and other properties
Assume that obj is an HTML control.

Obj.offsettop refers to the position of obj above or above the control, integral type, in pixels.

Obj.offsetleft refers to the position of obj from the left or upper control, the integer type, in pixels.

Obj.offsetwidth refers to the width, integer, and unit pixels of the obj control itself.

Obj.offsetheight refers to the height, integer, and unit pixels of the obj control itself.

We describe the above and above and left or upper controls as mentioned above.

For example:
<div id= "Tool" >
<input type= "button" value= "Submit" >
<input type= "button" value= "Reset" >
</div>

The OffsetTop of the Submit button is the distance of the submit button from the top of the tool layer, because the top border of the tool layer is closest to it.
The OffsetTop of the reset button is the distance of the reset button from the top of the tool layer, because the top border of the tool layer is closest to it.

The offsetleft of the Submit button is the distance of the submit button from the left border of the tool layer, because the left border of the tool layer is closest to the left of the toolbar.
The offsetleft of the reset button refers to the distance from the right border of the submit button to the Reset button, because the right border of the submit button is closest to the left of it.

The above properties are also available in FireFox.

Also: What we're talking about here is the property value of the HTML control, not the value of the document.body,document.body is interpreted differently in different browsers (in fact most environments are caused by different interpretations of document.body, not because Offset explains the difference).

JS Offsetheight offsetwidth Commentary