JS：offsetParent屬性

参考：

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性返回 null。

句法：

parentObj = element.offsetParent

变量：

· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

测试代码1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<p id="sonObj">测试OffsetParent属性</p>

</div>

</body>

</html>

测试结果：

Firefox3："BODY"

Internet Explorer 7："BODY"

Opera 9.51："BODY"

Chrome 0.2："BODY"

Safari 3："BODY

测试代码3：

测试代码4：

测试代码2：

结论：

当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

#parent{

position:absolute;

left:25px;

top:188px;

border:1px solid black;

}

</style>

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<div id="parent">div测试代码<p id="sonObj">测试OffsetParent属性</p></div>

</body>

</html>

测试结果：

Firefox3："DIV"

Internet Explorer 7："DIV"

Opera 9.51："DIV"

Chrome 0.2："DIV"

Safari 3："DIV"

测试结果：

Firefox3："BODY"

Internet Explorer 7："BODY"

Opera 9.51："BODY"

Chrome 0.2："BODY"

Safari 3："BODY"

结论：

当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

#sonObj{

position:relative;

left:25px;

top:188px;

border:1px solid black;

}

</style>

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<p id="sonObj">测试OffsetParent属性</p>

</div>

</h1>

</body>

</html>

测试结果：

Firefox3："H1"

Internet Explorer 7："H1"

Opera 9.51："H1"

Chrome 0.2："H1"

Safari 3："H1"

结论：

当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

#Grandfather{

position:relative;

left:25px;

top:188px;

border:1px solid black;

}

</style>

function offset_init(){

var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent;

alert(parentObj.tagName);

}

</script>

</head>

<p id="sonObj">测试OffsetParent属性</p>

</div>

</h1>

</body>

</html>

结论：

当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。（其实无论时标准兼容模式还是怪异模式，根元素都为Body元素）

JS：offsetParent屬性相关推荐

c# 一些控件常用屬性
Form: ControlBox:移除窗體按鈕(最大化.最小化.關閉組),並從左側移除「系統菜單」 Opacity:控制窗體透明度 ActiveControl:指出窗體上當前哪 ...
bipush java,Java Opcodes.BIPUSH屬性代碼示例
本文整理匯總了Java中org.objectweb.asm.Opcodes.BIPUSH屬性的典型用法代碼示例.如果您正苦於以下問題:Java Opcodes.BIPUSH屬性的具體用法?Java O ...
[js] 说说你对JS中暂性死区的理解，它有什么运用场景？
[js] 说说你对JS中暂性死区的理解,它有什么运用场景? var v=1; {v = 2;let v; }这里候会报错: Cannot access 'v' before initializatio ...
Ios: 如何保護iOS束文件屬性列表，圖像，SQLite，媒體文件
Ios: 如何保護iOS束文件屬性列表,圖像,SQLite,媒體文件我創建了Hello World示例項目,然後添加data.plist文件到資源文件夾.現在人們可以很容易得到束文件解壓縮.國際音標 ...
HTML_DOM的node屬性
DOM沒搞通,今天繼續學DOM.學三個node屬性,nodename,nodevalue,nodetype屬性.name返回節點名稱,value返回節點值,type返回節點類型.貌似簡單,這裏我用自己 ...
控制項學習四（屬性與事件）
四．初探控制項屬性(Property)的建立 1.當我們建立一個控制項(或類別),可以建立控制項的屬性(property),屬性多半是一個值,或是指到另外一個物件,或是一個集合. 請注意,在該屬性宣告 ...
善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度
在很久以前我們都是用 Table 在排版的,我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版,使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉. ...
Mcad学习笔记之通过反射调用類的方法,屬性,字段,索引器(2種方法)
相关文章导航 Sql Server2005 Transact-SQL 新兵器学习总结之-总结 Flex,Fms3相关文章索引 FlexAir开源版-全球免费多人视频聊天室,免费网络远程多人视频会议系统 ...
java中的terminated_Java State.TERMINATED屬性代碼示例
本文整理匯總了Java中java.lang.Thread.State.TERMINATED屬性的典型用法代碼示例.如果您正苦於以下問題:Java State.TERMINATED屬性的具體用法?Jav ...

JS：offsetParent屬性

JS：offsetParent屬性相关推荐

最新文章

热门文章