• 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定位的元素。

  • 相关阅读:
    c# 文件IO操作 StreamReader StreamWriter Split 使用
    UE4材质初探
    栈溢出 stackoverflow 的原因及解决办法
    UE4高级功能-初探超大无缝map的实现LevelStream
    为什么Unreal 4引擎能轻易实时渲染出vray要花半天才能渲染出的场景
    SSAO
    Unity3D 游戏贴图(法线贴图,漫反射贴图,高光贴图)
    巨人纪学峰 未来网游发展趋势是社区化
    Ogre中级教程
    国内自主研发的游戏引擎一览
  • 原文地址:https://www.cnblogs.com/kongxs/p/4053526.html
Copyright © 2020-2023  润新知