zoukankan      html  css  js  c++  java
  • 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">functionvar=""=</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">{:;:;:;:;}style>
    <script type="text/javascript" language="JavaScript">functionvar=""=</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">{:;:;:;:;}style>
    <script type="text/javascript" language="JavaScript">functionvar=""=</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定位的元素。

  • 相关阅读:
    需要学习的技术
    Building wheel for uwsgi (setup.py) ... error 解决问题
    version `ZLIB_1.2.3.4‘ not found 解决方法
    module 'tensorflow' has no attribute 'space_to_depth'(已解决)
    python语法—命名元祖、偏函数
    python—set集合比较(交集、并集,差集)
    websocket接口测试
    linux根目录扩容方法
    django—问题—中文编码格式报错 、分页warning
    python—使用sorted对字典进行排序
  • 原文地址:https://www.cnblogs.com/kongxs/p/4053526.html
Copyright © 2011-2022 走看看