Javascript:scrollWidth,clientWidth,offsetWidth的区别
1
scrollWidth
2
是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)
3
clientWidth
4
是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
5![](/Images/OutliningIndicators/None.gif)
6
offsetWidth
7
是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
8![](/Images/OutliningIndicators/None.gif)
9![](/Images/OutliningIndicators/None.gif)
10
------------------------------------------------
11
一个scrollWidth和clientWidth的例子:
12
<html>
13
<head>
14
<title>77.htm文件</title>
15
</head>
16![](/Images/OutliningIndicators/None.gif)
17
<body>
18
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
19
</body>
20
</html>
21
在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。
22
当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。
23
scrollWidth是对象实际内容的宽度。
24
clientWidth是对象看到的宽度(不含边线),这个例子里不会改变。
25![](/Images/OutliningIndicators/None.gif)
26![](/Images/OutliningIndicators/None.gif)
27
-----------------------------------------------
28
一个clientWidth和offsetWidth的例子:
29
<html>
30
<head>
31
<title>77.htm文件</title>
32
</head>
33![](/Images/OutliningIndicators/None.gif)
34
<body>
35
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
36
</body>
37
</html>
38![](/Images/OutliningIndicators/None.gif)
39
offsetWidth的值总是比clientWidth的值大
40
clientWidth是对象看到的宽度(不含边线)
41
offsetWidth是对象看到的宽度(含边线,如滚动条的占用的宽)
42![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/None.gif)
18
![](/Images/OutliningIndicators/None.gif)
19
![](/Images/OutliningIndicators/None.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/None.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/None.gif)
24
![](/Images/OutliningIndicators/None.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/None.gif)
30
![](/Images/OutliningIndicators/None.gif)
31
![](/Images/OutliningIndicators/None.gif)
32
![](/Images/OutliningIndicators/None.gif)
33
![](/Images/OutliningIndicators/None.gif)
34
![](/Images/OutliningIndicators/None.gif)
35
![](/Images/OutliningIndicators/None.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/None.gif)
38
![](/Images/OutliningIndicators/None.gif)
39
![](/Images/OutliningIndicators/None.gif)
40
![](/Images/OutliningIndicators/None.gif)
41
![](/Images/OutliningIndicators/None.gif)
42
![](/Images/OutliningIndicators/None.gif)