Full explanation of HTML: scrollleft, scrollwidth, clientwidth, and offsetwidth

•  

   

• Author: Source: http://bbs.chinaunix.net
• Core tips: HTML: scrollleft, scrollwidth, clientwidth, and offsetwidth: returns the scroll height of an object. Scrollleft: sets or obtains the scrolltop distance between the left edge of the object and the leftmost end of the currently visible content in the window: set or obtain the top visible content at the top of the object and in the window .....

 

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) 

Code

   <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "[url = login"  >  
  <  Html  Xmlns  = "[Url = http://www.w3.org/5o/xhtml#http://www.w3.org/5o/xhtml#/url]"  Lang  = "Gb2312"  >  
  <  Head >  
  <  Head  >  
  <  Title  >   CodeExample: test and comparison of clientwidth, offsetwidth, clientheight, and offsetheight  </  Title  >  
  <  Meta HTTP-equiv  = "Content-Type"  Content  = "Text/html; charset = gb2312"     />  
  <  Meta  Name  = "Author"  Content  = "Fengyan, CnLei.y.l@gmail.com"  >  
  < Meta  Name  = "Copyright"  Content  = "[Url = http://www.cnlei.com] http://www.cnlei.com [/url]"     />  
  <  Meta  Name  = "Description"  Content  = "Test and comparison of clientwidth, offsetwidth, clientheight, and 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  >  
  </  Head  >  
  <  Body  >  
  <  P >  Click the following link:  </  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 + 10 × 2 = 320  <  BR  />  
Clientheight = height + padding = 200 + 10 × 2 = 220  <  BR  />  
Offsetwidth = width + padding + border = 300 + 10 × 2 + 10 × 2 = 340  <  BR  />  
Offsetheight = height + padding + border = 200 + 10 × 2 + 10 × 2 = 240  </ P  >  
  <  P  > <  Strong  >  Ie5.0/5.5:  </  Strong  > <  BR  />  
Clientwidth = width-border = 300-10 × 2 = 280  <  BR />  
Clientheight = height-border = 200-10 × 2 = 180  <  BR  />  
Offline setwidth = width = 300  <  BR  />  
Offsetheight = height = 200  </  P  >  
  </  Div >  
  </  Body  >  
  </  Html  > 

 

Javascript: scrollwidth, clientwidth, and offsetwidth)

Clientwidth It is the visible width of the object. If it is not set to the same side of the scroll bar, it will change with the display size of the window. Scrollwidth It is the width of the actual content of the object. The width of the content in the object varies with the number of elements in the object. If the content is too large, the actual width of the object may be changed) Offsetwidth Is the visible width of the object. The package's scroll bar and other edges change with the display size of the window. ------------------------------------------------ An example of scrollwidth and clientwidth: <HTML> <Head> <Title> 77.htm file </title> </Head> <Body> <Textarea wrap = "off" onfocus = "alert ('rollwidth: '+ this. scrollwidth +' \ n clientwidth: '+ this. clientwidth);"> </textarea> </Body> </Html> Enter the content in the text box. The value of scrollwidth and clientwidth is the same before the horizontal scroll bar does not come out. When a row of content exceeds the width of the text box, a horizontal scroll bar is displayed, and the value of scrollwidth is changed. Scrollwidth is the width of the object content. Clientwidth is the width (excluding the edge) seen by the object, which will not be changed in this example. ----------------------------------------------- An example of clientwidth and offsetwidth: <HTML> <Head> <Title> 77.htm file </title> </Head> <Body> <Textarea wrap = "off" onfocus = "alert ('offsetwidth: '+ this. offsetwidth +' \ n clientwidth: '+ this. clientwidth);"> </textarea> </Body> </Html> the value of offsetwidth is always equal to the value of clientwidth. clientwidth indicates the width (excluding the edge) seen by the object. offsetwidth indicates the width (including the edge, such as the used width of the scroll bar)