如何使用原生JavaScript查詢div的寬度？

概述

原生JavaScript是JavaScript的一個框架，它主要提供兩種不同的方法來查詢div的寬度，分別是“offsetWidth”和“clientWidth”。這兩種方法都可以查詢網頁上任何元素的寬度。這裡所說的原生JavaScript指的是JavaScript中預定義的、供開發者使用的方法。它具有跨平臺相容性。

語法

下面給出查詢div寬度的語法。這兩種方法都用於計算div的寬度。

elementHTML.offsetWidth
elementHTML.clientWidth

  • elementHTML − 這是需要計算寬度的div元素。

  • offsetWidth − 這是一個JavaScript方法，用於計算div的寬度。在計算寬度時，它還包括元素的內邊距。

  • clientWidth − 這是JavaScript的預定義方法，它透過排除div的邊距、邊框和捲軸來計算div的寬度。

演算法1

  • 步驟1 − 在文字編輯器中建立一個HTML檔案，並在檔案中新增HTML基本結構。

  • 步驟2 − 現在建立一個具有綠色背景的HTML父div容器。

<div id="div" style="background-color: green;padding: 2rem;">
   <span id="w"></span>
</div>

  • 步驟3 − 現在將script標籤新增到HTML的body中。

<script></script>

  • 步驟4 − 現在將HTML元素的引用儲存到變數中。

el = document.getElementById("div");

  • 步驟5 − 現在使用offsetWidth屬性計算元素的寬度。

var elWidth = el.offsetWidth;

  • 步驟6 − 現在使用HTML DOM（文件物件操作）屬性將輸出顯示到瀏覽器頁面。

document.getElementById("w").innerHTML="width: "+elWidth;

示例1

在這個例子中，我們將使用offsetWidth方法來查詢div的寬度。

<html>
<head>
   <title> width of div using vanilla javascript </title>
</head>
<body>
   <div id="div" style="background-color: green;padding: 2rem;">
      <span id="w"></span>
   </div> 
   <script>
      var el = document.getElementById("div");
      var elWidth = el.offsetWidth;
      document.getElementById("w").innerHTML="width: "+elWidth;
   </script>
</body>
</html>

演算法2

  • 步驟1 − 在文字編輯器中建立一個HTML檔案，並在檔案中新增HTML基本結構。

  • 步驟2 − 現在建立兩個HTML父div容器。第一個容器為綠色，第二個容器具有紅色背景和固定寬度。

<div id="div" style="background-color: green;padding: 2rem;color: white;">
   <span id="w"></span>
</div>
<div id="div2" style="background-color: red;width: 150px;height: 50px;color: white;">
   <span id="w2"></span>
</div>

  • 步驟3 − 現在將script標籤新增到HTML的body中。

<script></script>

  • 步驟4 − 現在將第一個HTML元素的引用儲存到變數中。

var el = document.getElementById("div");

  • 步驟5 − 現在使用第一個容器的clientWidth屬性計算第一個元素的寬度。

var elW = el.clientWidth;
document.getElementById("w").innerHTML = "width: " + elW;

  • 步驟6 − 現在將第二個HTML元素的引用儲存到變數中。

var el2 = document.getElementById("div2");

  • 步驟5 − 現在使用第一個容器的clientWidth屬性計算第二個元素的寬度。

var elW = el.clientWidth;
document.getElementById("w").innerHTML = "width: " + elW;

  • 步驟6 − 現在將第二個HTML元素的引用儲存到變數中。

var el2 = document.getElementById("div2");

  • 步驟6 − 現在使用HTML DOM（文件物件操作）屬性將輸出顯示到瀏覽器頁面。

var elW2 = el2.clientWidth;
document.getElementById("w2").innerHTML = "width: " + elW2;

示例2

在這個例子中，我們將使用clientWidth方法計算div容器的寬度，並將比較div容器的靜態寬度和動態寬度。

<html>
<head>
   <title> width of div using vanilla javascript </title>
</head>
<body>
   <div id="div" style="background-color: green;padding: 2rem;color: white;">
      <span id="w"></span>
   </div>
   <div id="div2" style="background-color: red;width: 150px;height: 50px;color: white;">
      <span id="w2"></span>
   </div>
   <script>
      var el = document.getElementById("div");
      var elW = el.clientWidth;
      document.getElementById("w").innerHTML = "width: " + elW;
      var el2 = document.getElementById("div2");
      var elW2 = el2.clientWidth;
      document.getElementById("w2").innerHTML = "width: " + elW2;
   </script>
</body>
</html>

在下圖中，有兩個div容器，綠色容器是動態寬度容器，瀏覽器螢幕大小改變時，容器寬度也會改變；第二個容器是固定寬度容器，這種型別的容器不受瀏覽器螢幕大小的影響，相對於視口是固定的。

結論

計算div寬度的功能有助於建立頁面的響應式佈局。它也用於動畫轉換目的，例如，當容器寬度變為零時，可以觸發新的動畫，例如建立新的元素或更改頁面的佈局。此功能還可以透過使div的寬度保持靜態來構建圖表。這兩種方法的返回型別都是整數。兩種方法計算的寬度單位都是“px”。

更新於：2023年10月13日

1K+ 瀏覽量

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告