美文网首页js笔记程序员
js笔记五十四之获取元素的偏移量offset

js笔记五十四之获取元素的偏移量offset

作者: uplyw | 来源:发表于2018-07-01 21:27 被阅读1次
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #outer{
                width: 300px;
                height: 300px;
                margin: 50px auto;
                border: 5px solid #000;
                padding: 50px;
                background: orange;
            }
            #inner{
                width: 200px;
                height: 200px;
                /*margin: 50px auto;*/
                border: 5px solid #000;
                padding: 50px;
                background: yellow;
            }
            #center{
                width: 100px;
                height: 100px;
                /*margin: 50px auto;*/
                border: 5px solid #000;
                padding: 50px;
                background: green;
    
            }
        </style>
        <div id="outer">
            <div id="inner">
                <div id="center"></div>
            </div>
        </div>
        <script type="text/javascript">
            var outer = document.getElementById("outer"),
                inner = document.getElementById("inner"),
                center = document.getElementById("center");
    
                // 1. parentNode:父节点 HTML结构层级关系中的上一级元素
                // center.parentNode // -> inner
                // inner.parentNode // -> outer
                // outer.parentNode // -> body
    
                // 2. offsetParent: 父级参照物 在同一个平面中, 最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)
                // 一般来说一个页面中的所有元素的父级参照物都是body
                // center.offsetParent // -> body
                // inner.offsetParent // -> body
                // outer.offsetParent // -> body
                // document.body.offsetParent // -> null
    
    
                // 想要改变父级参照物需要使用position定位来进行改变
                // position: absolute;
                // position: relative;
                // position: fixed;
                // 这几个值都可以把父级参照物进行修改 
                // outer.style.position = "relative";
                // console.log(center.offsetParent); // -> outer
                // console.log(inner.offsetParent); // -> outer
                // console.log(outer.offsetParent); // -> body
    
    
                // outer.style.position = "relative";
                // inner.style.position = "relative";
                // console.log(center.offsetParent); // -> inner
                // console.log(inner.offsetParent); // -> outer
                // console.log(outer.offsetParent); // -> body
    
                
                // null和undefined的区别?
                // null和undefined都代表没有,
                // 但null是属性在但值不存在;undefined是连属性都不存在
                // document.parentNode (浏览器天生自带的一个属性: 父亲节点的属性) -> null -> 因为一个页面中的document已经是最顶级元素了,他没有父亲
                // document.parentnode -> undefined (因为没有parentnode属性)
        </script>
    

    相关文章

      网友评论

        本文标题:js笔记五十四之获取元素的偏移量offset

        本文链接:https://www.haomeiwen.com/subject/ljfayftx.html