JavaScript中DOM上的尺寸及位置屬性

更新時間：2025年08月07日 10:43:18 作者：超級英雄不打小怪獸

DOM是JavaScript中的一個重要概念,它是一種編程接口,使得開發(fā)人員可以使用HTML和XML文檔,這篇文章主要介紹了JavaScript中DOM上尺寸及位置屬性的相關資料,需要的朋友可以參考下

前言

相信當家對DOM元素上的尺寸及位置屬性一定不陌生，常見的clientHeight、offsetHeight等屬性在日常開發(fā)中會經常用到，但也會常常忘記各個屬性具體的邊界情況。本文整理了DOM元素上的尺寸及位置屬性，方便大家日后在使用過程中能快速回想起各個屬性的邊界。

DOM元素上的尺寸及位置

DOM元素上的尺寸及位置屬性我分為以下三類方便記憶，分別是clinet類、offset類、scroll類。

1、clientHeight、clientWidth、clientTop、clientLeft；

2、offsetHeight、offsetWidth、offsetTop、offsetLeft；

3、scrollHeight、scrollWidth、scrollTop、scrollLeft；

client(可視區(qū))類型

clientHeight：指向元素可視部分的padding-top+padding-bottom+height部分。

clientWidth：指向元素可視部分的padding-left+padding-right+width部分。

clientTop：指向元素的border-top的寬度。

clientLeft：指向元素的border-left的寬度。

注意，這里的可視部分指的是該元素未被折疊起來的部分，而不是指我們所看到的部分，這里從字面上看很容易造成誤導。讓我們來看一個實例代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尺寸及位置</title>
    <style>
        #container{
            background-color: red;
            height: 400px;
            width: 400px;
            padding: 20px;
            border-top: 10px solid;
            border-bottom: 12px solid;
            border-left: 13px solid;
            border-right: 14px solid;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="container">
    </div>
    <script>
        const container = document.getElementById('container')
        console.log('clientHeight:',container.clientHeight) //clientHeight: 440
        console.log('clientWidth:',container.clientWidth) //clientWidth: 440
        console.log('clientTop:',container.clientTop)//clientTop: 10
        console.log('clientLeft:',container.clientLeft)//clientLeft: 13
    </script>
</body>
</html>

根據代碼我們可以很清楚的得到該元素的位置和尺寸值，現在我們將元素的高度改為2000px，使整個瀏覽器出現縱向滾動條。

這個時候我們獲取該元素clientHeight應該等于 2000+20+20=2400 ，而不是照片中字面意思上的可視區(qū)域高度。我們再看一個案例，當這個元素出現滾動條時，他的clinetHeight又是多少？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尺寸及位置</title>
    <style>
        #container{
            background-color: red;
            height: 400px;
            width: 400px;
            padding: 20px;
            border-top: 10px solid;
            border-bottom: 12px solid;
            border-left: 13px solid;
            border-right: 14px solid;
            overflow: auto;

        }
    </style>
</head>
<body>
    <div id="container">
        <div style="height: 1000px;"></div>
    </div>
    <script>
        const container = document.getElementById('container')
        console.log('clientHeight:',container.clientHeight) //clientHeight: 440
        console.log('clientWidth:',container.clientWidth) //clientWidth: 430  由于滾動條存在寬度
        console.log('clientTop:',container.clientTop)//clientTop: 10
        console.log('clientLeft:',container.clientLeft)//clientLeft: 13
    </script>
</body>
</html>

當該元素出現滾動條時，元素的clientHeight= 400+20+20 = 440，這是沒有問題的，看到這里你一定清楚了“可視區(qū)域的”含義，我們接著往下看。

offset類型

offsetHeight：指向元素可視部分的padding-top+padding-bottom+height+border-top+border-bottom部分。

offsetWidth：指向元素可視部分的padding-left+padding-right+width+border-left+border-right部分。

clientTop：指當前元素距離最近的已經定位過的祖先元素的上邊距。

clientLeft：指當前元素距離最近的已經定位過的祖先元素的左邊距。

這里offsetHight/Width和clientHeight/Width是差不多的，區(qū)別在于offsetHeight/Width部分多添加了border部分，我們著重看一下offsetTop和offsetLeft。代碼如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尺寸及位置</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #container{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            margin: 30px 60px;
            position: relative;
            padding: 30px;
            border: 10px solid;
        }
        #item{
            background-color: red;
            height: 40px;
            width: 40px;
            padding: 20px;
            border: 10px solid;
            overflow: auto;

        }
    </style>
</head>
<body>
    <div id="container">
        <div id="item"></div>
    </div>
    <script>
        const container = document.getElementById('item')
        console.log('offsetHeight:',container.offsetHeight) //offsetHeight: 100
        console.log('offsetWidth:',container.offsetWidth) //offsetWidth: 100
        console.log('offsetTop:',container.offsetTop)//offsetTop: 30
        console.log('offsetLeft:',container.offsetLeft)//offsetLeft: 30
    </script>
</body>
</html>

從代碼及結果圖里相信你就已經理解了offsetTop和Left的邊界，這里一定要注意是相對于最近的定位過的祖先元素，只要定位過就可以，無論是絕對定位或者相對定位或者固定定位，只要定位（不包含initial）即可。

scroll類型

scrollHeight：指向元素內容的實際高度，包含該元素滾動卷起來的部分高度。

scrollWidth：向元素內容的實際寬度，包含該元素滾動卷起來的部分寬度。

scrollTop：指向元素卷起來的高度。

clientLeft：指向元素卷起來的寬度。

scroll類型的尺寸及位置通常用在該元素存在滾動條情況，當元素不存在滾動的情況下，scrollHeight/Width等同于 clientHeight/Width，讓我們看一下示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尺寸及位置</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #container{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            position: initial;
            padding: 30px;
            border: 10px solid;
            overflow: auto;
        }

    </style>
</head>
<body>
    <div id="container">
        <div style="height: 1000px;"></div>
    </div>
    <script>
        const container = document.getElementById('container')
        console.log('scrollHeight:',container.scrollHeight) //scrollHeight: 1060
        console.log('scrollWidth:',container.scrollWidth) //scrollWidth: 343
        console.log('scrollTop:',container.scrollTop)//scrollTop: 0
        console.log('scrollLeft:',container.scrollLeft)//scrollLeft: 0
    </script>
</body>
</html>

從代碼這可以看出，元素的高度300px,但是內部的元素將整個父元素撐大，這個時候元素的高度變?yōu)?1000+30+30，也就是內部元素所占據的content大小加上上下padding，本質與clientHeight的算法是相同的，只是內容區(qū)域的高度不同。

此時我將滾動條滑動到底部，這個時候再看scrollTop的值。

我們能看到隨著滾動條的滾動，scrollTop的值也在發(fā)生改變，指向卷起部分的高度，我們將卷起部分的高度加上可視部分的高度結果算出來的值等于scrollHeight，既 700+300+30+30 = 1060，因此在實際開發(fā)中，如果我們想要在滾動條滑到底部進行額外操作的化，我們可以通過該公式判斷滾動條是否滑倒了元素底部。