offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent
一、offsetParent
英文解读:
part one:offsetParent作为一个元素属性并不是每一个元素都是值得拥有的,对于符合以下情况的元素是没有offsetParent这个属性的:
① 该元素没有css布局的盒子模型(我觉得这句话很难理解,有见识的人指教);
② 该元素是根元素(关于这一点的理解在后续会解释,其实原因就是offsetParent是一个相对属性,就是要找个参照物);
③ 该元素师html body元素;
④ 该元素的position属性为fixed;
part two: 对于offsetParent这个属性值又是怎么计算的呢?计算方法取决于该元素最近的祖先元素(注意不是单单父级元素喔)。应该按照以下条件逐个满足计算
① 相对祖先元素中position不是static的那个元素;
② 假如在根据条件①找不到的情况,则默认是<body>元素;
③ 虽然祖先元素的position是static,但是元素名字是td、th或者是table的,则可以等同于第①条
二、offsetTop
英文解读:
offsetLeft属性也不是每个元素都有的,其实更确切地讲应该是建立在offsetParent之上的,它要去找一个有offsetParent属性的祖先元素。
① 如果该元素是html body元素,或者是没有css布局,自然就没有offsetLeft的意义,offsetLeft的值会返回0并且终止该算法;
以下还有两点就是有关offsetLeft的计算问题:
① 对于所有祖先元素的offsetParent属性值为null的元素,该元素的offsetLeft的值是这么计算的:该值应该放在该元素的CSS布局模型下进行计算,为以上边框为边界相对于该元素初始包含块的位置,期间要忽略该元素和祖先元素的平移;
② 而存在祖先元素中存在具有offsetParent属性的元素,计算要依赖于最近的具有offsetParent属性的祖先元素,计算情况为:拥有offsetParent属性的祖先元素的padding-top,加上目标元素以上边框为边界相对于该元素初始包含块的位置(这就涉及到了margin-left),期间要忽略该元素和祖先元素的平移;
三、offsetLeft
英文解读:
参考offsetTop
四、offsetWidth
英文解读:
offsetWidth为具有css布局元素的属性。该值得计算为:元素的边框、水平的padding、元素本身的width。
五、offsetHeight
英文解读:
offsetHeight可以参考offsetWidth进行定义。
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)
最后:附上博友详细分析计算的好文一枚 http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html
offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight的更多相关文章
- offsetleft、offsetTop、offsetParent的兼容性问题
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 简单理解offsetleft、offsetTop、offsetParent
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- offsetTop、offsetLeft、offsetWidth、offsetHeight的用法
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...
- offsetWidth、offsetleft 等图文详解
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- 【JavaScript】全面解析offsetLeft、offsetTop
假设 obj 为某个 HTML 控件.obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetRight 指 obj 距离右方或上层控件的位置,整型, ...
- javaScript动画1 offsetWidth、offsetLeft
offsetWidth和offsetHeight <!DOCTYPE html> <html lang="en"> <head> <met ...
- JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clie ...
随机推荐
- UltraEdit20 注册
UltraEdit v20下载与注册机 UltraEdit是一套功能强大的文本编辑器,可以编辑文本.十六进制.ASCII 码.HTML.PHP.Perl.Java 和 JavaScript等众多流行计 ...
- TextView字符串波浪式跳动--第三方开源---JumpingBeans
在github上有一个开源项目:JumpingBeans,其项目主页是:https://github.com/frakbot/JumpingBeans JumpingBeans将一个普通的Androi ...
- Delphi XE5 for android 使用 BITMAP STYLE DESIGNER 改变控件背景
一.BITMAP STYLE DESIGNER 工具集成在IDE开发工具的TOOLS菜单. 使用NEW 新建一个安卓样式.NEW—NEW ANDROID STYLE FOR FIREMONKEY. 这 ...
- jQuery学习笔记(6)--复选框控制表格行高亮
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- linux下的声卡驱动架构
1.linux下的声卡驱动架构主要分为OSS架构和ALSA架构. 2.OSS架构 OSS全称是Open Sound System,叫做开放式音频系统,这种早期的音频系统这种基于文件系统的访问方式,这意 ...
- KNN算法的简单实现
一 算法原理:已知一个训练样本集,其中每个训练样本都有自己的标记(label),即我们知道样本集中每一个样本数据与所属分类的对应关系.输入没有标记的新数据后,将新数据的每个特征与样本集中的数据对应的 ...
- MySQL 出现 Access denied for user 'root'@'localhost' (using password: YES) 错误
登录某台服务器的mysql时候总报错: mysql2/client.rb:58:in `connect': Access denied for user 'root'@'localhost' (usi ...
- C# 添加一个用户对文件或者文件夹的所有权限
private void ModifyFilePermission(string path, string user, FileType filetype) { if (filetype == Fil ...
- ED/EP系列4《圈存指令》
1. 圈存交易 通过圈存交易,持卡人可将其在银行相应账户上的资金划入电子存折或电子钱包中. 特点: 1)--必须在金融终端上联机进行; 2)--必须提交个人识别码(PIN) 步骤: 1) --终端: ...
- Effiective C++ (一)
最近在看Effective C++ ,同时将总结一下里边的重要知识点: ########################## module 1 #################### ...