offsetLeft offsetTop // DOM操作,之寫入內容

Allen 趙奇隆發表於2020-10-05

offsetLeft offsetTop

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        padding: 50px;
    }

    .div1{
        margin-left: 100px;
        position: fixed;
    }

    .div2{
        position: fixed;
    }
</style>
</head>
<body>
<div class="div1">
    <div class="div2">我是div</div>
</div>


<script>
    // offsetLeft  
    //    到定位父級左邊界的間距
    // offsetTop
    //    到定位父級上邊界的間距


    var oDiv = document.querySelector('.div2');
    // 每一個標籤物件,都有一個屬性,叫 offsetParent 
    // 表示這個標籤的定位父級物件是誰
    // (1)標籤本身,沒有定位屬性,定位父級物件 是 body
    //     此時是這個標籤到body的間距 
    //     不管是body的padding,還是標籤的margin,都是到body的間距
    //     如果有父級,計算的也是當前標籤到 body 的總間距
    // (2)標籤本身有定位,要看定位父級物件是誰
    //     position: relative;    定位父級仍然是 body
    //     position: absolute;    要看具體的定位是誰
    //     position: fixed;       定位父級是 null 指的是 視窗視窗
    ///    表示的仍然是到定位父級的間距,只是定位父級有可能不同
    // (3)本身沒有定位,父級有定位屬性 
    //     此時定位物件父級是 帶有定位屬性的父級標籤
    //     表示的是到這個父級標籤的間距
    // 總結:
    //     offsetLeft  offsetTop 情況很複雜
    //     需要先確定 offsetParent  定位父級物件標籤
    //     獲取的資料,就是當前標籤,到父級定位標籤的總間距
    //     先找爹,確定爹,到爹的間距  
    console.dir(oDiv);

// DOM操作,之寫入內容

<div>
    我是文字內容
    <span>1</span>
    <a href="#">2</a>
    <ul>
        <li>3</li>
    </ul>
    <h1>4</h1>
</div>

<script>
    // DOM操作,之寫入內容

    // 給標籤物件,寫入內容

    // 是,全覆蓋寫入
    // 新寫的內容,會覆蓋標籤中,之前定義的內容
    //    包括文字,以及子級標籤

    // 標籤物件.innerHTML()   支援標籤
    // 標籤物件.innerText()   不支援標籤

    // 對div標籤,寫入內容
    //    新寫入的內容,會覆蓋,之前div標籤的所有內容
    //    包括文字,標籤等

    var oDiv = document.querySelector('div');

    // oDiv.innerHTML = '我是寫入的內容';


    // 1,  標籤物件.innerHTML   獲取標籤物件中所有的內容,包括標籤
    //     標籤物件.innerText   獲取標籤物件中所有的內容,不包括標籤

    console.log(oDiv.innerHTML);
    console.log(oDiv.innerText);


    // 2,  標籤物件.innerHTML = '內容'  設定標籤物件的內容,支援解析標籤
    //     標籤物件.innerText = '內容'  設定標籤物件的內容,不支援,不解析標籤

    // 解析h1 標籤,執行結果是 寫入一個 h1標籤,標籤內容是 我是innerHTML寫入的
    oDiv.innerHTML = '<h1>我是innerHTML寫入的</h1>';

    // 不支援,不解析標籤,執行結果就是,純字串寫入
    oDiv.innerText = '<h1>我是innerHTML寫入的</h1>';


</script>

相關文章