软件开发培训班 >> 编程开发 >> JavaScript

javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <head> <title> 
代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 
</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<meta name="author" content="枫岩,CnLei.y.l@gmail.com"> 
<meta name="copyright" content="http://www.jb51.net" /> 
<meta name="description" 
content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" 
/> <style type="text/css" media="all"></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"></script> 
</head> <body> <p>点击下面的链接:</P> <div 
id="Div_CnLei"> <p>GetClientWidth(); 
GetClientHeight();</P> 
<p>GetOffsetWidth(); 
GetOffsetHeight();</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/oa/news/2023/8m87973.html"  target=_blank > 全新米家3D打印机上线 打印和加固一体化设计 </a></td><td><a href="http://www.zhujiangroad.com/edu/soft/69319.html"  target=_blank > win8怎么关机？教你4种win8关机方法 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/mobile/news/2021/3m82928.html"  target=_blank > 安兔兔下架realme测试成绩：通过作弊手段获得高跑分 </a></td><td><a href="http://www.zhujiangroad.com/edu/soft/69372.html"  target=_blank > Windows7的十大最佳功能你知道吗？ </a></td></tr></table></div> 
</div> <div id="Description"> 
<p><strong>IE6.0、FF1.06+：</strong>
 
clientWidth = width + padding = 300+10×2 = 320
 clientHeight 
= height + padding = 200+10×2 = 220
 offsetWidth = width + 
padding + border = 300+10×2+10×2= 340
 offsetHeight = height 
+ padding + border = 200+10×2+10×2 = 240</P> 
<p><strong>IE5.0/5.5：</strong>
 
clientWidth = width - border = 300-10×2 = 280
 clientHeight 
= height - border = 200-10×2 = 180
 offsetWidth = width = 
300
 offsetHeight = height = 200</P> </div> 
</body> </html>

技术文章快速查找

Iframe自适应高度绝对好使的代码兼容IE,遨游，火狐

js实现div的切换特效上一个下一个

javascript 面向对象编程 function也是类

JavaScript格式化数字的函数代码

理清apply(),call()的区别和关系

Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

JS Replace()的高级使用方法介绍

让FireFox支持innerText的实现代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建