定义
scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）
clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变
offsetWidth 是对象可见的宽度，包滚动条等边线，会随窗口的显示大小改变
例子
举个例子说明一下：http://jsfiddle.net/songworld/6XKDK/
<html>
<head>
<title>scrollWidth、clientWidth、offsetWidth的区别</title>
</head>
<body>
<textarea wrap="off" id="txt"></textarea>
<button onclick="javascript:compare();">比较</button>
<script type="text/javascript">
function compare(){
var txtarea = document.getElementById("txt");
alert("scrollWidth:"+txtarea.scrollWidth+"\nclientWidth:"+txtarea.clientWidth+"\noffsetWidth:"+txtarea.offsetWidth);
}
</script>
</body>
</html>- 当textarea没有输入内容时，scrollWidth和clientWidth值一样；
- 当textarea输入值并且出现横向滚动条时，scrollWidth发生改变，clientWidth不变；
- 两种情况下offsetWidth的值均未改变，并且大于clientWidth；
可见，scrollWidth是对象实际内容的宽度，clientWidth是对象可见内容的宽度（不含边线），offsetWidth也是对象可见内容的宽度（含边线）。
分析
同样是对象可见内容的宽度，为什么offsetWidth始终比clientWidth大呢？
原因就在于这个“边线”。在FF1.06+和IE6.0+上，有这样的区别：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
当然，如果出现的滚动条，offsetWidth也会包含滚动条的宽度，而clientWidth是不包含滚动条的宽度的。
扫一扫
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
