在 JavaScript 中獲取元素的高度和寬度

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. 使用 CSS 盒模型獲取元素的高度和寬度
  2. 在 JavaScript 中使用 offsetWidthoffsetHeight 獲取元素的高度和寬度
  3. 在 JavaScript 中使用 clientWidthclientHeight 獲取元素的高度和寬度
  4. 在 JavaScript 中使用 scrolltWidthscrollHeight 獲取元素的高度和寬度
在 JavaScript 中獲取元素的高度和寬度

本教程討論元素的寬度和高度,並指導我們如何在 JavaScript 中獲取它的高度和寬度。

首先,我們必須瞭解 CSS 盒模型來了解 offsetWidthoffsetHeightclientWidthclientHeightscrollWidthscrollHeight

使用 CSS 盒模型獲取元素的高度和寬度

CSS 盒模型是指網頁的佈局和設計。這個盒模型包裝了所有的 HTML 元素。

下面列出了它的四個基本部分。

  • Margins:它也是一個透明區域,可以清除邊界外的一些空間。
  • Borders:它是圍繞填充和內容的邊界(邊框)。
  • Padding:填充是清除內容周圍一些空間的透明區域。它是實際內容和邊框之間的距離。
  • Content:實際內容放在這裡;內容可以是影象、文字或視訊。

這是視覺化所有四個部分的影象。

在 JavaScript 中獲取元素的高度和寬度 - CSS 盒模型

在 JavaScript 中使用 offsetWidthoffsetHeight 獲取元素的高度和寬度

offsetWidthoffsetHeight 是 HTML 元素的兩個屬性,用於獲取 HTML 元素的高度和寬度。offsetHeightoffsetWidth 以畫素 (px) 為單位,分別用於返回元素的佈局高度和寬度。

如果元素被隱藏,它們將輸出零 (0)。請記住,寬度和高度包括填充和邊框。

下面是計算 offsetHeightoffsetWidth 的公式。

offsetWidth = Visible Content Width + Padding + Border + Vertical Scrollbar
offsetHeight = Visible Content Height  + Padding + Border + Horinzal Scrollbar

請參閱以下螢幕截圖以視覺化上述公式。

在 JavaScript 中獲取元素的高度和寬度 - offsetWH

示例程式碼:

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style offsetWidth and offsetHeight Property
    </title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 5px black solid;
            padding: 1px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box"> </div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;

        console.log("offsetWidth = " + width);
        console.log("offsetHeight = "+height);
    </script>
</body>
</html>

輸出:

"offsetWidth = 112"
"offsetHeight = 112"

在 JavaScript 中使用 clientWidthclientHeight 獲取元素的高度和寬度

clientWidthclientHeight 是隻讀屬性,它們返回元素的實際寬度和高度(以使用者可見的畫素為單位)。clientWidthclientHeight 使用以下公式計算。

clientWidth = Visible Content Width + Padding
clientHeight = Visible Content Height  + Padding

請參閱以下螢幕截圖以視覺化上述公式。

在 JavaScript 中獲取元素的高度和寬度 - clientWH

示例程式碼:

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style clientWidth and clientHeight Property
    </title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 5px black solid;
            padding: 1px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box"> </div>
    <script>
        let box = document.querySelector('.box');
        let width = box.clientWidth;
        let height = box.clientHeight;

        console.log("clientWidth = " + width);
        console.log("clientHeight = "+height);
    </script>
</body>
</html>

輸出:

"clientWidth = 102"
"clientHeight = 102"

在 JavaScript 中使用 scrolltWidthscrollHeight 獲取元素的高度和寬度

元素的 scrollWidthscrollHeight 是隻讀屬性,包括填充和內容的寬度和高度(由於溢位而可見和不可見)。scrollWidthscrollHeight 使用以下公式計算。

scrollWidth = Content Width (visible and invisible both) + Padding
scrollHeight = Content Height (visible and invisible both) + Padding

讓我們實現上述所有寬度和高度(偏移量、客戶端和滾動)。

HTML 程式碼:

<!DOCTYPE html>
<html>
<head>
    <title>offsetWH,scrollWH,clientWH</title>
</head>
<body>
    <button onclick="offsetWH()">Get Offset Width/Height</button>
    <button onclick="clientWH()">Get Client Width/Height</button>
    <button onclick="scrollWH()">Get Scroll Width/Height</button>
    <div id="container">
        <div id="items">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
    <article id="display"></article>
</body>
</html>

CSS 程式碼:

#container {
    margin-top: 10px;
    height: 200px;
    width: 200px;
    overflow: auto;
    margin: 20px;
}

#items {
    height: 400px;
    width: 400px;
    padding: 20px;
    background-color: skyblue;
    border: 1px solid green;
}

JavaScript 程式碼:

function scrollWH() {
    let item = document.getElementById("items");
    let height = item.scrollHeight;
    let width = item.scrollWidth;
    document.getElementById("display").innerHTML = "Scroll Height = " +
        height + "px" + " Scroll Width = " + width+"px";
}

function offsetWH() {
    let item = document.getElementById("items");
    let height = item.offsetHeight;
    let width = item.offsetWidth;
    document.getElementById("display").innerHTML = "Offset Height = " +
        height + "px" + " Offset Width = " + width + "px";
}

function clientWH() {
    let item = document.getElementById("items");
    let height = item.clientHeight;
    let width = item.clientWidth;
    document.getElementById("display").innerHTML = "Client Height = " +
        height + "px" + " Client Width = " + width + "px";
}

輸出:

在 JavaScript 中獲取元素的高度和寬度 - allWH

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Element