如何使用原生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+ 浏览量

开启你的职业生涯

完成课程获得认证

开始学习
广告