Javascript:scrollWidth,clientWidth,offsetWidth的区别

最新推荐文章于 2024-01-24 17:15:09 发布

weixin_34128411

最新推荐文章于 2024-01-24 17:15:09 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kakaxu/archive/2007/11/04/948938.html

本文介绍了scrollWidth、clientWidth及offsetWidth的区别。scrollWidth表示对象实际内容的宽度，clientWidth表示对象可见宽度（不含边线），而offsetWidth则包含了边线宽度。通过示例展示了这些属性在不同情况下的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1

scrollWidth
2

是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）
3

clientWidth
4

是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
5

6

offsetWidth
7

是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
8

9

10

------------------------------------------------
11

一个scrollWidth和clientWidth的例子：
12

<html>
13

<head>
14

<title>77.htm文件</title>
15

</head>
16

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

26

27

-----------------------------------------------
28

一个clientWidth和offsetWidth的例子：
29

<html>
30

<head>
31

<title>77.htm文件</title>
32

</head>
33

34

<body>
35

<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
36

</body>
37

</html>
38

39

offsetWidth的值总是比clientWidth的值大
40

clientWidth是对象看到的宽度（不含边线）
41

offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽）
42

转载于:https://www.cnblogs.com/kakaxu/archive/2007/11/04/948938.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。