<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "[url = require">
<HTML xmlns = "[url = http://www.w3.org/5o/xhtml#http://www.w3.org/5o/xhtml#/url]" lang = "gb2312">
<Head>
<Head>
<Title> Code Example: 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: 75px;
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/>
Offsetwidth = width = 300 <br/>
Offsetheight = height = 200 </P>
</Div>
</Body>
<SCRIPT type = "text/JavaScript">
VaR OBJ = Document. getelementbyid ('div _ cnlei ');
Document. Write ('width: '+ obj. style. Width + "clientwidth:" + obj. clientwidth + "offsetwidth:" + obj. offsetwidth)
</SCRIPT>
</Html>
