当前位置： 移动技术网 > IT编程>网页制作>CSS > scrollWidth,clientWidth与offsetWidth的区别

scrollWidth,clientWidth与offsetWidth的区别

2017年12月12日  | 移动技术网IT编程  | 我要评论
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是对象看到的宽度（含边线，如滚动条的占用的宽） 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网