提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Javascript拖拽系列文章1之offsetParent属性

JavaScript属性 系列 文章 拖拽
2023-06-13 09:14:02 时间
第一篇就先讲讲Javascript中的offsetParent属性吧。
支持的浏览器：InternetExplorer4.0+，Mozilla1.0+，Netscape6.0+，Opera7.0+，Safari1.0+
element.offsetParent
Summary
offsetParentreturnsareferencetotheobjectwhichistheclosest(nearestinthecontainmenthierarchy)positionedcontainingelement.Iftheelementisnon-positioned,therootelement(htmlinstandardscompliantmode;bodyinquirksrenderingmode)istheoffsetParent.offsetParentreturnsnullwhentheelementhasstyle.displaysetto"none".
Syntax
parentObj=element.offsetParent
Parameters
·parentObjisanobjectreferencetotheelementinwhichthecurrentelementisoffset.
Specification
DOMLevel0.Notpartofspecification.
节选自MozillaDeveloperCenter网站
翻译如下：
element.offsetParent
总结
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位,则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。当容器元素的style.display被设置为"none"时（译注：IE和Opera除外），offsetParent属性返回null。
句法
parentObj=element.offsetParent
变量
·parentObj是一个元素的引用，当前元素的偏移量在其中计算。
规范
DOMLevel0.并非规范的一部分.

UntitledDocument 测试OffsetParent属性




测试结果：
Firefox3："BODY"
InternetExplorer7："BODY"
Opera9.51："BODY"
Chrome0.2："BODY"
Safari3："BODY"
结论：
当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。（其实无论时标准兼容模式还是怪异模式，根元素都为Body元素）
测试代码2：

UntitledDocument #parent{ position:absolute; left:25px; top:188px; border:1pxsolidblack; } div测试代码测试OffsetParent属性



测试结果：
Firefox3："DIV"
InternetExplorer7："DIV"
Opera9.51："DIV"
Chrome0.2："DIV"
Safari3："DIV"
结论：
当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素。
测试代码3：

UntitledDocument #Grandfather{ position:relative; left:25px; top:188px; border:1pxsolidblack; } 测试OffsetParent属性


测试结果：
Firefox3："H1"
InternetExplorer7："H1"
Opera9.51："H1"
Chrome0.2："H1"
Safari3："H1"
结论：
当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

测试代码4：

UntitledDocument #sonObj{ position:relative; left:25px; top:188px; border:1pxsolidblack; } 测试OffsetParent属性



测试结果：
Firefox3："BODY"
InternetExplorer7："BODY"
Opera9.51："BODY"
Chrome0.2："BODY"
Safari3："BODY"
结论：
当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。
好了，offsetParent属性就讲到这了。
至于下一篇写什么，我暂时还没想好。

相关文章