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 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
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
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
什么是JavaScript
2009/08/13 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
解读ES6中class关键字
2017/11/20 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
python字典基本操作实例分析
2015/07/11 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python中for in的用法详解
2020/04/17 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
is_file和file_exists效率比较
2021/03/14 PHP
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
实习教师自我鉴定
2013/12/09 职场文书
大学生实习证明范本
2014/01/15 职场文书
《搭石》教学反思
2014/04/07 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python