scrollWidth,clientWidth與offsetWidth的區別

2020-10-23 18:40:07

字體：大中小

來源：轉載

供稿：網友

scrollWidth
是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。
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>
在文本框內輸入內容，當橫向滾動條沒出來前scrollWidth和clientWidth的值是一樣的。當一行內容超出文本框的寬度，就有橫向滾動條出來了，scrollWidth的值就變了。
scrollWidth是對象實際內容的寬度。
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是對象看到的寬度（含邊線，如滾動條的占用的寬）

上一篇：關于超鏈接的下劃線使用說明

下一篇：HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全詳解