如何使用原生 JavaScript 查找 div 的宽度?
概述
原生 JavaScript 是 JavaScript 的一个框架，它主要提供两种不同的方法来使用"offsetWidth"和"clientWidth"查找 div 的宽度。这两种方法都可以查找网页上任何元素的宽度。这里原生 JavaScript 指的是为开发人员预定义的 JavaScript 方法。它提供跨平台兼容性。
语法
查找 div 宽度的语法如下。这两个方法用于计算 div 的宽度。
elementHTML.offsetWidth elementHTML.clientWidth
elementHTML − 这是需要计算宽度的 div 元素。
offsetWidth − 这是计算 div 宽度的 JavaScript 方法。在计算宽度时，它还包括元素的填充。
clientWidth − 这是 JavaScript 的预定义方法，通过排除 div 的边距、div 的边框和滚动条来计算 div 的宽度。
算法 1
步骤 1 − 在文本编辑器上创建一个 HTML 文件，并向文件中添加 HTML 样板。
步骤 2 − 现在创建一个具有绿色背景的 HTML 父 div 容器。
<div id="div" style="background-color: green;padding: 2rem;"> <span id="w"></span> </div>
步骤 3 − 现在将脚本标记添加到 HTML 主体。
<script></script>
步骤 4 − 现在将 HTML 元素的引用存储到变量中。
el = document.getElementById("div");
步骤 5 - 现在使用 offsetWidth 属性计算元素的宽度。
var elWidth = el.offsetWidth;
步骤 6 - 现在使用 HTML DOM(文档对象操作)属性将输出显示到浏览器页面。
document.getElementById("w").innerHTML="width: "+elWidth;
示例 1
在此示例中，我们将使用 offset 方法来查找 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 − 现在将脚本标记添加到 HTML 主体。
<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"为单位。
