当前位置： 文江博客话题详情

javascript中的offsetParent属性

发布于 2022-10-15 08:58:18 字数 7600 浏览 15 评论 0

转：zcjnever

javascript中的offsetParent属性

Javascript中的offsetParent属性吧。
支持的浏览器：Internet Explorer 4.0+，Mozilla
1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
element.offsetParent
Summary

offsetParent returns a reference to the object which is the closest (nearest
in the containment hierarchy) positioned containing element. If the element is
non-positioned, the root element (html in standards compliant mode; body in
quirks rendering mode) is the offsetParent. offsetParent returns null when the
element has style.display set to "none".
Syntax
parentObj =
element.offsetParent
Parameters
· parentObj is an object reference to
the element in which the current element is offset.
Specification
DOM
Level 0. Not part of specification.
节选自Mozilla Developer Center网站
翻译如下：

element.offsetParent
总结

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

parentObj = element.offsetParent
变量
· parentObj
是一个元素的引用，当前元素的偏移量在其中计算。
规范
DOM Level 0. 并非规范的一部分.

  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3. "http://www.w3.org/TR/html4/strict.dtd"> <html>
  4. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <title>Untitled Document</title>
  9. <script
  10. type="text/javascript" language="JavaScript">
  11. function offset_init(){
  13. var pElement = document.getElementById("sonObj");
  14. parentObj =
  15. pElement.offsetParent;
  16. alert(parentObj.tagName);
  17. }
  18. </script>
  20. </head>
  21. <body onload="offset_init()">
  22. <div
  23. id="parent">
  24. <p id="sonObj">测试OffsetParent属性
  25. </div>
  27. </body>
  28. </html>

复制代码测试结果：
Firefox3："BODY"
Internet
Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari
3："BODY"
结论：

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

测试代码2：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <title>Untitled Document</title>
  9. <style
  10. type="text/css">
  11. #parent{
  12. position:absolute;
  14. <!--position：relative;-->
  15. left:25px;
  16. top:188px;
  17. border:1px
  18. solid black;
  19. }
  20. </style>
  21. <script type="text/javascript"
  22. language="JavaScript">
  23. function offset_init(){
  24. var pElement =
  25. document.getElementById("sonObj");
  26. parentObj = pElement.offsetParent;
  28. alert(parentObj.tagName);
  29. }
  30. </script>
  31. </head>
  33. <body onload="offset_init()">
  34. <div id="parent">div测试代码<p
  35. id="sonObj">测试OffsetParent属性</div>
  36. </body>
  37. </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：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <title>Untitled Document</title>
  9. <style
  10. type="text/css">
  11. #Grandfather{
  12. position:relative;
  13. left:25px;
  15. top:188px;
  16. border:1px solid black;
  17. }
  18. </style>
  20. <script type="text/javascript" language="JavaScript">
  21. function
  22. offset_init(){
  23. var pElement = document.getElementById("sonObj");
  25. parentObj = pElement.offsetParent;
  26. alert(parentObj.tagName);
  27. }
  29. </script>
  30. </head>
  31. <body onload="offset_init()">
  33. <h1 id="Grandfather">
  34. <div id="parent">
  35. <p
  36. id="sonObj">测试OffsetParent属性
  37. </div>
  38. </h1>
  40. </body>
  41. </html>

复制代码测试结果：
Firefox3："H1"
Internet
Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"

结论：

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

测试代码4：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <title>Untitled Document</title>
  9. <style
  10. type="text/css">
  11. #sonObj{
  12. position:relative;
  13. left:25px;
  15. top:188px;
  16. border:1px solid black;
  17. }
  18. </style>
  20. <script type="text/javascript" language="JavaScript">
  21. function
  22. offset_init(){
  23. var pElement = document.getElementById("sonObj");
  25. parentObj = pElement.offsetParent;
  26. alert(parentObj.tagName);
  27. }
  29. </script>
  30. </head>
  31. <body onload="offset_init()">
  33. <h1 id="Grandfather">
  34. <div id="parent">
  35. <p
  36. id="sonObj">测试OffsetParent属性
  37. </div>
  38. </h1>

复制代码

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

傲世九天

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文