JavaScript中的一些定位属性[图解]


Posted in Javascript onJuly 14, 2010

JavaScript中的一些定位属性[图解]
有这张图就够了,简单地说明一下

以Height为例,Width同理:

div.clientHeight:可见窗口除去了margin+border之后的长度。
div.offsetHeight:在div.clientHeight的基础上加了border和滚动条的长度。
div.scrollHeight:就是元素内容的实际高度。
以Top为例,Left同理:

div.clientTop:margin之后padding之前的长度值。
div.offsetTop:该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。
div.scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,即是在出现了纵向滚动条的情况下,滚动条拉动的距离。
关于offsetParent,不同的浏览器有不同的实现算法,有一种常见布局在各种浏览器中 offsetParent 是一样的,那就是:外层元素 div 的 position 计算值是 relative、absolute 时,内层元素 div 的 offsetParent 总是外层元素 div。

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
lib.utf.js
Aug 21 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 #Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 #Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 #Javascript
IE6图片加载的一个BUG解决方法
Jul 13 #Javascript
IE中createElement需要注意的一个问题
Jul 13 #Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 #Javascript
初识javascript 文档碎片
Jul 13 #Javascript
You might like
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
WxPython建立批量录入框窗口
2019/02/27 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python名片管理系统开发
2020/06/18 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
廉洁自律个人总结
2015/02/14 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Go 语言结构实例分析
2021/07/04 Golang