JS OffsetParent属性详解

刺骨的言语ヽ痛彻心扉 2022-08-13 00:41 61阅读 0赞

JS OffsetParent属性在WEB开发过程中迟早会用到，下面17javascript跟大家距离说明一下这个属性的主要用途。  
  
  
   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>  
< 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;   
    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>  
< div id="parent">div测试代码  
<p id="sonObj">测试OffsetParent属性</p>  
< /div>  
< /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定位的元素。

来源：[JS OffsetParent属性详解][JS OffsetParent]

[JS OffsetParent]: http://www.17javascript.com/thread-39-1-1.html