Dom关于位置和尺寸的api

parentNode 直接父级//和offsetParent不同

inner2.parentNode

<!DOCTYPE html>

<html id="html">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #inner2{

                position: absolute;

            }

            #wrap{

                position: relative;

            }

        </style>

    </head>

    <body id="body">

        <div id="wrap">wrap

            <div id="inner1">inner1

                <div id="inner2">inner2</div>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        //hmtl css js

        window.onload=function(){

            //parentNode 直接父级

            var inner2 = document.querySelector("#inner2");

            console.log(inner2.parentNode.id);

        }

    </script>

</html>

offsetParent

a.有点类型于css中包含块（css中的概念）的概念
b.offsetLeft 和 offsetTop都是参照于offsetParent的内边距边界
c.规则（html和body之间的margin被清除）

本身定位为fiexd，不管你父级有没有定位

存在兼容性问题
火狐的offsetParent --> body

非火狐offsetParent --> null

<!DOCTYPE html>

<html id="html">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #wrap{position: absolute;}

            #inner1{position: fixed;}

            #inner2{position: relative;}

            #inner3{position: fixed;}

        </style>

    </head>

    <body id="body">

        <div id="wrap">wrap

            <div id="inner1">inner1

                <div id="inner2">inner2

                    <div id="inner3"></div>

                </div>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        /*

        ev||event

        鼠标滚轮

        事件绑定

        offsetParent

            1.父级是否有定位(4种)

            2.本身是否有定位(4种)

            3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8))

            4*4*8 = 128

            本身定位为fixed

                    ==> offsetParent:null（不是火狐）

                    ==> offsetParent:body（火狐）

            本身定位不为fixed

                    父级没有定位

                        ==> offsetParent:body

                    父级有定位

                        ==> offsetParent:定位父级

        */

        window.onload=function(){

            console.log(inner3.offsetParent)

        }

    </script>

</html>

测试代码

非fixed
父级没有定位
offsetParent --> body
父级有定位
offsetParent --> 定位父级

fixed 不管你有没有定位都根据body

    <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #wrap{position: absolute;}

            #inner1{position: fixed;}

            #inner2{position: relative;}

            #inner3{position: fixed;}

        </style>

    </head>

    <body id="body">

        <div id="wrap">wrap

            <div id="inner1">inner1

                <div id="inner2">inner2

                    <div id="inner3"></div>

                </div>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        /*

        ev||event

        鼠标滚轮

        事件绑定

        offsetParent

            1.父级是否有定位(4种)

            2.本身是否有定位(4种)

            3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8))

            4*4*8 = 128

            本身定位为fixed

                    ==> offsetParent:null（不是火狐）

                    ==> offsetParent:body（火狐）

            本身定位不为fixed

                    父级没有定位

                        ==> offsetParent:body

                    父级有定位

                        ==> offsetParent:定位父级

        */

        window.onload=function(){

            console.log(inner3.offsetParent)

        }

    </script>

</html>

<!DOCTYPE html>

<html id="html">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            html,body{

                height: %;

                overflow: hidden;

            }

            #wrap{position: absolute;background: pink;left: 100px;top: 50px;}

            #inner1{position: fixed;background: deeppink;left: 50px;top: 150px;}

            #inner2{position: relative;background: hotpink;left: 80px;top: 70px;}

            #inner3{position: fixed;background: yellow;left: 60px;top: 30px;}

            div{

                width: 200px;

                height: 200px;

                padding: 50px;

                border: 10px solid;

            }

        </style>

    </head>

    <body id="body">

        <div id="wrap">wrap

            <div id="inner1">inner1

                <div id="inner2">inner2

                    <div id="inner3">inner3</div>

                </div>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        /*

         *

        ev||event

        鼠标滚轮

        事件绑定

        offsetParent

            1.父级是否有定位(4种)

            2.本身是否有定位(4种)

            3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8))

            4*4*8 = 128

            本身定位为fixed

                    ==> offsetParent:null（不是火狐）

                            offsetTop和offsetLeft也是参照于body的

                    ==> offsetParent:body（火狐）

            本身定位不为fixed

                    父级没有定位

                        ==> offsetParent:body

                    父级有定位

                        ==> offsetParent:定位父级

        */

        window.onload=function(){

            console.log(inner3.offsetTop,inner3.offsetLeft)

        }

    </script>

</html>

巴特西

Dom关于位置和尺寸的api

最新文章

热门文章