scrollWidth,clientWidth,offsetWidth的区别


Posted in Javascript onJanuary 13, 2015

通过一个demo测试这三个属性的差别。

说明:

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

该demo就在页面中放一个textarea元素,采用默认宽高显示。

情况1:

元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

scrollWidth,clientWidth,offsetWidth的区别

情况2:

元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

scrollWidth,clientWidth,offsetWidth的区别

END

以上就是scrollWidth,clientWidth,offsetWidth区别的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
使用javascript实现雪花飘落的效果
Jan 13 #Javascript
javascript数组输出的两种方式
Jan 13 #Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 #Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 #Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 #Javascript
jquery删除指定子元素代码实例
Jan 13 #Javascript
JavaScript删除指定子元素代码实例
Jan 13 #Javascript
You might like
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
Javascript 解疑
2009/11/11 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
python装饰器常见使用方法分析
2019/06/26 Python
Python中six模块基础用法
2019/12/08 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
pycharm安装及如何导入numpy
2020/04/03 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python字符串三种格式化输出
2020/09/17 Python
python Gabor滤波器讲解
2020/10/26 Python
快速创建python 虚拟环境
2020/11/28 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
2014年群众路线党员自我评议
2014/09/24 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
2016年教师节慰问信
2015/12/01 职场文书