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 相关文章推荐
JavaScript闭包详解
Feb 02 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
在webstorm中配置less的方法详解
Sep 25 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
node 标准输入流和输出流代码实例
2019/09/19 Javascript
Vue实现验证码功能
2019/12/03 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python IDLE入门简介
2017/12/08 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
2015年法院工作总结范文
2015/04/28 职场文书