ScrollHeight: Gets the scrolling height of the object.
ScrollLeft: Sets or gets the left distance between the left edge of an object and the current visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the topmost part 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 coordinates specified by the Offsetparent property
offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property
Event.clientx the horizontal coordinates of the relative document
Event.clienty vertical coordinates relative to document
The horizontal coordinates of the event.offsetx relative to the container
The vertical coordinates of the event.offsety relative to the container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop relative to the document's horizontal coordinates + vertical scrolling amount
Above mainly refers to IE, the Firefox difference is 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: CSS in the margin attribute, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" gb2312 "> <pead> <pead> <title> Code examples: Test comparisons for ClientWidth, offsetwidth, clientheight, offsetheight </title> <meta http-equiv= "Content-type" Content= "text/html; charset=gb2312 "/> <meta name=" author "content=" Maple Rock, CnLei.y.l@gmail.com "> <meta name=" Copyright "content=" Http://www.jb51.net "/> <meta name=" description "content=" on ClientWidth, Offsetwidth, ClientHeight, offsetheight test comparison "/> <style type= text/css" media= "all" ><!--body {font-size:14px;} a,a:visited {color: #00f;} #Div_CnLei {width:300px; padding:10px; border:10px solid #ccc; Background: #eee; font-size:12px; } #Div_CnLei P {margin:0;padding:10px;background: #fff;} --></style><style type= "Text/css" media= "All" bogus= "1" > 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> </pead> <body> <p> Click on the link below:</p> <div id= "Div_cnlei" > <p> Getclientwidth (); Getclientheight ();</p> <p>getoffsetwidth (); Getoffsetheight ();</p> </div> <div id= "Description" > <p><strong>ie6.0, ff1.06+:</ Strong> clientwidth = width + padding = 300+10x2 = up to clientheight = height + padding = 200+10x2 = The Offsetwidt H = wiDTH + padding + border = 300+10x2+10x2= offsetheight = height + padding + border = 200+10x2+10x2 = 240</p> & lt;p><strong>ie5.0/5.5:</strong> clientwidth = Width-border = 300-10x2 = 280 ClientHeight = height- border = 200-10x2 = 180 Offsetwidth = width = offsetheight = height = 200</p> </div> </body> ;/html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
