主页 > 知识库 > scrollWidth,clientWidth与offsetWidth的区别

scrollWidth,clientWidth与offsetWidth的区别

热门标签:智能手机 网站文章发布 美图手机 铁路电话系统 银行业务 检查注册表项 服务器配置 呼叫中心市场需求
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是对象看到的宽度(含边线,如滚动条的占用的宽) 
您可能感兴趣的文章:
  • javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
  • scrollWidth,clientWidth,offsetWidth的区别
  • javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
  • HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
  • this.clientWidth和this.offsetWidth两个有什么不同
  • 与ClientWidth有关的一点资料
  • JavaScript中clientWidth,offsetWidth,scrollWidth的区别

标签:乐山 上海 新疆 沈阳 长治 红河 河南 沧州

巨人网络通讯声明:本文标题《scrollWidth,clientWidth与offsetWidth的区别》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266