快捷導(dǎo)航

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

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

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

前言

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

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的寬度。

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

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

根據(jù)代碼我們可以很清楚的得到該元素的位置和尺寸值，現(xiàn)在我們將元素的高度改為2000px，使整個(gè)瀏覽器出現(xiàn)縱向滾動(dòng)條。

這個(gè)時(shí)候我們獲取該元素clientHeight應(yīng)該等于 2000+20+20=2400 ，而不是照片中字面意思上的可視區(qū)域高度。我們?cè)倏匆粋€(gè)案例，當(dāng)這個(gè)元素出現(xiàn)滾動(dòng)條時(shí)，他的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  由于滾動(dòng)條存在寬度
        console.log('clientTop:',container.clientTop)//clientTop: 10
        console.log('clientLeft:',container.clientLeft)//clientLeft: 13
    </script>
</body>
</html>

當(dāng)該元素出現(xiàn)滾動(dòng)條時(shí)，元素的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：指當(dāng)前元素距離最近的已經(jīng)定位過的祖先元素的上邊距。

clientLeft：指當(dāng)前元素距離最近的已經(jīng)定位過的祖先元素的左邊距。

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

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

scroll類型

scrollHeight：指向元素內(nèi)容的實(shí)際高度，包含該元素滾動(dòng)卷起來的部分高度。

scrollWidth：向元素內(nèi)容的實(shí)際寬度，包含該元素滾動(dòng)卷起來的部分寬度。

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

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

scroll類型的尺寸及位置通常用在該元素存在滾動(dòng)條情況，當(dāng)元素不存在滾動(dòng)的情況下，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,但是內(nèi)部的元素將整個(gè)父元素?fù)未?，這個(gè)時(shí)候元素的高度變?yōu)?1000+30+30，也就是內(nèi)部元素所占據(jù)的content大小加上上下padding，本質(zhì)與clientHeight的算法是相同的，只是內(nèi)容區(qū)域的高度不同。

此時(shí)我將滾動(dòng)條滑動(dòng)到底部，這個(gè)時(shí)候再看scrollTop的值。

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