精講-offset系列、scroll系列、client系列~

時間 2019-11-29

標籤 offset 系列 scroll client 简体版

原文原文鏈接

前言：

相信不少人跟我同樣，在實際開發中有時候須要用到原生js來獲取一個元素的寬高，天真的覺得 document.getElementById('box').style.width 就能夠獲取到，可是結果常常事與願違~這也讓不少小夥伴摸不着頭腦~這裏我爲何要說常常而不說老是呢？？是由於有時候能夠獲取有時候卻不能。what????(黑人問號臉)還有這種操做？碰到這種狀況的時候你是否是懷疑人生了，哈哈。。。。。bash

發生的緣由：之因此會出現有時候能夠獲取，有時候不能夠獲取的狀況，是由於親愛的你有時候把樣式寫在style標籤中了，有時候又把樣式寫在style屬性中了，你的不經意，卻形成了很是大的差距呢~post

有如下兩種狀況：測試

在style標籤中設置的樣式屬性獲取不到；
在style屬性中設置的樣式屬性是能夠獲取到的；

可是在實際開發中，咱們不多會把樣式寫在style屬性中，那該如何獲取呢？下面咱們就來講一下offset系列~ui

offset系列：

offsetWidth：獲取元素的寬(包含邊框)
offsetHeight：獲取元素的高(包含邊框)
offsetLeft：獲取元素距離左邊的值
offsetTop：獲取元素距離右邊的值

<style>
    #box1{
        width: 200px;
        height: 200px;
        background: pink;
        position: absolute;
        left: 100px;
        top: 50px;
    }
    #box2{
        width: 100px;
        height: 100px;
        background: lightgreen;
    }
    #btn{
        position: absolute;
        top: 250px;
    }
    </style>
    
    
<body>
    <div id="box1" style="width:200px">
        <div id="box2"></div>
    </div>
    <input type="button" value="按鈕" id="btn">

<script>
    var box1=document.getElementById('box1');
    var box2=document.getElementById('box2');
    document.getElementById('btn').onclick=function(){
        console.log(box1.style.width);      //200px
        console.log(box1.style.height);     //獲取不到
        console.log(box1.offsetWidth);      //200
        console.log(box1.offsetHeight);     //200
        console.log(box1.offsetLeft);       //100
        console.log(box1.offsetTop);        //50
    }
</script>
</body>
複製代碼