无意中看到offsetParent，顺便就搜了下使用方法

最新推荐文章于 2024-04-28 08:32:47 发布

digilover

最新推荐文章于 2024-04-28 08:32:47 发布

阅读量188

点赞数

分类专栏： web开发文章标签： offsetParent

本文链接：https://blog.csdn.net/digilover/article/details/84155013

版权

web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

--------------------------example----返回body-----------------------------

function offset_init(){
  var pElement = document.getElementById("sonObj");
  parentObj = pElement.offsetParent;
  alert(parentObj.tagName);
}

</script>

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

-----------------------------------------------------------------------------

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

--------------------------example------返回div---------------------------

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

</body>
------------------------------------------------------------------------------

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

----------------------------example----------返回h1----------------------

<h1 id="Grandfather"><div id="parent"><p id="sonObj">测试OffsetParent属性</p></div></h1>

</body>

-----------------------------------------------------------------------------

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

--------------------------example-------返回body-------------------------------

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

digilover

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无意中看到offsetParent，顺便就搜了下使用方法

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

扫一扫

专栏目录