Full explanation of the distance between scrollleft, scrollwidth, clientwidth, and offsetwidth

HTML: scrollleft, scrollwidth, clientwidth, and offsetwidth Scrollheight: gets the scroll height of an object. Scrollleft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window. Scrolltop: sets or obtains the distance between the top of the object and the top of the visible content in the window. Scrollwidth: gets the scroll width of an object. Offsetheight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute. Offsetleft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetparent attribute. Offsettop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsettop attribute. The horizontal coordinates of event. clientx relative to the document The vertical coordinates of event. clienty relative to the document Horizontal coordinates of event. offsetx relative to the container Event. offsety vertical coordinates of the container Document.doc umentelement. scrolltop vertical scroll Value Event.clientxw.document.doc umentelement. The horizontal coordinate of scrolltop relative to the document + The amount of vertical scrolling The difference between Firefox and IE 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 (The margin attribute in CSS is independent of clientwidth, offsetwidth, clientheight, and offsetheight) Test code: Code: [copy to clipboard] & lt ;! Doctype HTML public & quot;-// W3C // dtd xhtml 1.0 transitional // en & quot; [url = require; & Lt; html xmlns = & quot; [url = http://www.w3.org/5o/xhtml#http://www.w3.org/5o/xhtml#/url#" lang = & quot; gb2312 & quot; & gt; & Lt; Head & gt; & Lt; Head & gt; & Lt; Title & gt; code example: test and comparison of clientwidth, offsetwidth, clientheight, and offsetheight & lt;/Title & gt; & Lt; Meta http-equiv = & quot; Content-Type & quot; content = & quot; text/html; charset = gb2312 & quot;/& gt; & Lt; Meta name = & quot; author & quot; content = & quot; fengyan, CnLei.y.l@gmail.com & quot; & gt; & Lt; Meta name = & quot; copyright & quot; content = & quot; [url = http://www.cnlei.com] http://www.cnlei.com [/url] & quot;/& gt; & Lt; Meta name = & quot; description & quot; content = & quot; test and comparison of clientwidth, offsetwidth, clientheight, and offsetheight & quot;/& gt; & Lt; style type = & quot; text/CSS & quot; media = & quot; All & quot; & gt; 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 ;} & Lt;/Style & gt; & Lt; Script Type = & quot; text/JavaScript & quot; & gt; 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; } & Lt;/script & gt; & Lt;/Head & gt; & Lt; Body & gt; & Lt; P & gt; click the following link: & lt;/P & gt; & Lt; Div id = & quot; div_cnlei & quot; & gt; & Lt; P & gt; & lt; a href = & quot; javascript: Alert (getclientwidth ('div _ cnlei'); & quot; & gt; getclientwidth (); & lt;/A & gt; & lt; a href = & quot; javascript: Alert (getclientheight ('div _ cnlei'); & quot; & gt; getclientheight (); & lt;/A & gt; & lt;/P & gt; & Lt; P & gt; & lt; a href = & quot; javascript: Alert (getoffsetwidth ('div _ cnlei'); & quot; & gt; getoffsetwidth (); & lt;/A & gt; & lt; a href = & quot; javascript: Alert (getoffsetheight ('div _ cnlei'); & quot; & gt; getoffsetheight (); & lt;/A & gt; & lt;/P & gt; & Lt;/Div & gt; & Lt; Div id = & quot; description & quot; & gt; & Lt; P & gt; & lt; strong & gt; ie6.0, ff1.06 +: & lt;/strong & gt; & lt; br/& gt; Clientwidth = width + padding = 300 + 10 × 2 = 320 & lt; br/& gt; Clientheight = height + padding = 200 + 10 × 2 = 220 & lt; br/& gt; Offsetwidth = width + padding + border = 300 + 10 × 2 + 10 × 2 = 340 & lt; br/& gt; Offsetheight = height + padding + border = 200 + 10 × 2 + 10 × 2 = 240 & lt;/P & gt; & Lt; P & gt; & lt; strong & gt; ie5.0/5.5: & lt;/strong & gt; & lt; br/& gt; Clientwidth = width-border = 300-10 × 2 = 280 & lt; br/& gt; Clientheight = height-border = 200-10 × 2 = 180 & lt; br/& gt; Offsetwidth = width = 300 & lt; br/& gt; Offsetheight = height = 200 & lt;/P & gt; & Lt;/Div & gt; & Lt;/Body & gt; & Lt;/html & gt;