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动态分页效果堪比时光网
Sep 25 Javascript
js中document.write的那点事
Dec 12 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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
再说下636单管机
2021/03/02 无线电
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
js实现转动骰子模型
2019/10/24 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
党员批评与自我批评
2014/02/12 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
原材料检验岗位职责
2014/03/15 职场文书
自我鉴定总结
2014/03/24 职场文书
个人工作保证书
2015/02/28 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
在人间读书笔记
2015/06/30 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers