zoukankan      html  css  js  c++  java
  • 转: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">
    <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测试代码
    <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">
    <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定位的元素。

  • 相关阅读:
    LintCode Python 简单级题目 488.快乐数
    LintCode Python 简单级题目 100.删除排序数组中的重复数字 101.删除排序数组中的重复数字II
    LintCode Python 简单级题目 373.奇偶分割数组
    LintCode Python 简单级题目 39.恢复旋转排序数组
    LintCode Python 简单级题目 35.翻转链表
    LintCode Python 简单级题目 451.两两交换链表中的节点
    LintCode Python 简单级题目 174.删除链表中倒数第n个节点
    aws查看官方centos镜像imageid
    linux shell脚本查找重复行/查找非重复行/去除重复行/重复行统计
    php配置优化-生产环境应用版
  • 原文地址:https://www.cnblogs.com/yuyu9988/p/3412149.html
Copyright © 2011-2022 走看看