DOM元素尺寸offsetWidth,scrollWidth,clientWidth等详解
2015-07-01 12:21
453 查看
例子:
offsetWidth=border+padding+height;
这里等于: 50+50+200+50+50=400
注意:offsetWidth不能在display:none的div获得正确值,可以用jquery的outerWidth()正确获得
clientWidth=padding+height-滚动条
这里等于:50+200+50-17=283
注意:jquery的innerWidth()可不把滚动条计算进去,可得到结果300
scrollWidth=padding+包含内容的完全高度
这里等于:50+402+50=502
scrollTop=scrollHeight-clientHeight
=padding+包含内容的完全高度-(padding+height-滚动条)
=包含内容的完全高度-height-滚动条
<div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow:auto;padding:50px"> <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div> <script> var div=document.getElementById("div"); var ho=div.offsetHeight; var hc=div.clientHeight; console.log(ho,hc); </script> </div>
1.offsetWidth
offsetWidth=border+padding+height;
这里等于: 50+50+200+50+50=400
注意:offsetWidth不能在display:none的div获得正确值,可以用jquery的outerWidth()正确获得
2.clientWidth
clientWidth=padding+height-滚动条
这里等于:50+200+50-17=283
注意:jquery的innerWidth()可不把滚动条计算进去,可得到结果300
3.scrollWidth
scrollWidth=padding+包含内容的完全高度
这里等于:50+402+50=502
4.scrollTop
定义:获取位于元素顶部边界与元素中当前可见内容的最顶端之间的距离scrollTop=scrollHeight-clientHeight
=padding+包含内容的完全高度-(padding+height-滚动条)
=包含内容的完全高度-height-滚动条
相关文章推荐
- struts2学习笔记
- Android学习 18 ->网格控件GridView
- JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
- 【Java 学习笔记】 HashMultimap(guava)
- 谈谈CListCtrl如何调整行高
- mysql突然出现大量慢sql,随后redis访问超时
- List,set,Map 的用法和区别
- [Objective-C] 通过objc_get/setAssociatedObject 在category里加入成员变量
- springmvc学习笔记---面向移动端支持REST API
- 2.JVM运行机制 -- JVM序列
- 获取checkbox复选框的值
- “413 Request Entity Too Large” 错误解决
- 在Ubuntu 11.04中执行sudo apt-get update命令时出现404错误
- Spring的编程式事务与声明式事务区别
- Cocos2d-x学习笔记(9)(CCTextFieldTTF使用输入框)
- 1.初步认识JVM -- JVM序列
- Mysql复制表格
- Android图形系统之Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback之间的联系
- OC大补之法
- JavaScript判断数组是否包含指定元素的方法