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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python异步任务队列示例
2014/04/01 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
Django中使用group_by的方法
2015/05/26 Python
Python pass详细介绍及实例代码
2016/11/24 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python 加密的实例详解
2017/10/09 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Django实现学员管理系统
2019/02/26 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
厨房领班竞聘演讲稿
2014/04/23 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
党员自我对照检查材料
2014/08/19 职场文书
学习计划书怎么写
2014/09/15 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
对Golang中的FORM相关字段理解
2021/05/02 Golang
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers