Dom關於位置和尺寸的api

時間 2019-11-16

標籤 dom 關於位置尺寸 api 欄目 HTML 简体版

原文原文鏈接

parentNode 直接父級//和offsetParent不一樣javascript

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>

View Code

offsetParentcss

a.有點類型於css中包含塊（css中的概念）的概念
b.offsetLeft 和 offsetTop都是參照於offsetParent的內邊距邊界
c.規則（html和body之間的margin被清除）html

自己定位爲fiexd，無論你父級有沒有定位java

存在兼容性問題
火狐的offsetParent --> body瀏覽器

非火狐offsetParent --> nullide

<!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">3</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 無論你有沒有定位都根據bodyspa

    <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>

View Code

<!DOCTYPE html>
<html id="html">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            html,body{
                height: 100%;
                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>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。