快捷導航

scrollWidth,clientWidth與offsetWidth的區(qū)別

更新時間：2007年08月22日 20:27:50 作者：

scrollWidth
是對象的實際內(nèi)容的寬，不包邊線寬度，會隨對象中內(nèi)容的多少改變（內(nèi)容多了可能會改變對象的實際寬度）。
clientWidth
是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變。
offsetWidth
是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。

一個scrollWidth和clientWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框內(nèi)輸入內(nèi)容，當橫向滾動條沒出來前scrollWidth和clientWidth的值是一樣的。當一行內(nèi)容超出文本框的寬度，就有橫向滾動條出來了，scrollWidth的值就變了。
scrollWidth是對象實際內(nèi)容的寬度。
clientWidth是對象看到的寬度（不含邊線），這個例子里不會改變。

一個clientWidth和offsetWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth的值總是比clientWidth的值大。
clientWidth是對象看到的寬度（不含邊線）
offsetWidth是對象看到的寬度（含邊線，如滾動條的占用的寬）

您可能感興趣的文章: