JS OffsetParent属性深入解析

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

句法：
parentObj = element.offsetParent

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


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
  function offset_init() {
  var pElement = document.getElementById("sonObj");
  parentObj = pElement.offsetParent;
  alert(parentObj.tagName);
    }
</script>
</head>
<body onload="offset_init()">
<div id="parent">
<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

结论：
当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)

测试代码2


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#parent {
    position: absolute; <!-- position：relative; -->
    left: 25px;
    top: 188px;
    border: 1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
    function offset_init() {
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
    }
</script>
</head>
<body onload="offset_init()">
<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"

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

测试代码3


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#Grandfather {
    position: relative;
    left: 25px;
    top: 188px;
    border: 1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init() {
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
    }
</script>
</head>
<body onload="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<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定位的元素。

赞 (0)

相关推荐

  • jQuery中siblings()方法用法实例

    本文实例讲述了jQuery中siblings()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集合中每一个元素的同辈元素. 同辈元素集合可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).siblings(expr) 参数列表: 参数 描述 expr 可选.用于筛选同辈元素的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta chars

  • jQuery prev ~ siblings选择器使用介绍

    jQuery prev ~ siblings选择器使用介绍

    1.prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素 2.(1)prev:任何有效选择器 (2)siblings:一个选择器,并且它作为第一个选择器的同辈 3.示例 (1)源码 siblings.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jquery next nextAll nextUntil siblings的区别介绍

    next:紧挨着$('')的一个元素 nextAll:在$('')以后的所有的同辈元素 nextUntil:until有直到...之前的意思,所以他表示$('')以后的所有的同辈元素,不过要在nextUntil参数之前,不包括匹配的元素本身 sibings:$('')前后的所有同辈元素 简单理解就是,next就是找他的弟弟/妹妹,nextAll就是找他所有的弟弟/妹妹,nextUntil就是找比他小一定年龄的弟弟/妹妹,siblings就是找他所有的哥哥/姐姐,还有他的所有的弟弟/妹妹.所以同理

  • javascript中parentNode,childNodes,children的应用详解

    "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementBy

  • getcwd cannot access parent directories错误解决方法

    复制代码 代码如下: [root@web-server php]# /etc/init.d/httpd restart shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory 该错误表示 getcwd 命令无法定位到当前工作目录.一般来说是因为你 cd 到了某个目录之后 rm 了这个目录,这时去执行某些 service 脚

  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

  • 仿jQuery的siblings效果的js代码

    复制代码 代码如下: function siblings(o){//参数o就是想取谁的兄弟节点,就把那个元素传进去 var a=[];//定义一个数组,用来存o的兄弟元素 var p=o.previousSibling; while(p){//先取o的哥哥们 判断有没有上一个哥哥元素,如果有则往下执行 p表示previousSibling if(p.nodeType===1){ a.push(p); } p=p.previousSibling//最后把上一个节点赋给p } a.reverse()

  • jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

    jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选). 如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象.元素是按照从最近的父元素向外的顺序被返回的..parents() 和 .parent()

  • jQuery中parent()方法用法实例

    本文实例讲述了jQuery中parent()方法用法.分享给大家供大家参考.具体分析如下: 此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素. 所取得的父元素集合也可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).parent(expr) 参数列表: 参数 描述 expr 可选.用来筛选的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head>

  • 有关jQuery中parent()和siblings()的小问题

    今天发现一个小问题,现在也不知道到底是哪个梗在作祟,但是感觉是parent()和siblings()其中的一个. 我是想这样的根据输入的条件删选内容: demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://co

  • jquery 层次选择器siblings与nextAll的区别介绍

    HTML代码: 复制代码 代码如下: <div> <div >1</div> <div class="one"> 2 <div>2_1 <div>2_1_1</div> </div> <div>2_2</div> </div> <div>3</div> <div>4</div> </div> $(

随机推荐