在 JavaScript 中获取元素的高度和宽度

您所在的位置：网站首页 › js获取页面高度和宽度 › 在 JavaScript 中获取元素的高度和宽度

在 JavaScript 中获取元素的高度和宽度

2023-03-13 13:03| 来源: 网络整理| 查看: 265

当前位置：主页 > 学无止境 > WEB前端 > WEB前端编程语言网络算法操作系统数据库在 JavaScript 中获取元素的高度和宽度作者：迹忆客最近更新：2023/03/10 浏览次数：

本教程讨论元素的宽度和高度，并指导我们如何在 JavaScript 中获取它的高度和宽度。

首先，我们必须了解 CSS 盒模型来了解 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth 和 scrollHeight。

使用 CSS 盒模型获取元素的高度和宽度

CSS 盒模型是指网页的布局和设计。这个盒模型包装了所有的 HTML 元素。

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

Margins：它也是一个透明区域，可以清除边界外的一些空间。 Borders：它是围绕填充和内容的边界（边框）。 Padding：填充是清除内容周围一些空间的透明区域。它是实际内容和边框之间的距离。 Content：实际内容放在这里；内容可以是图像、文本或视频。

这是可视化所有四个部分的图像。

在 JavaScript 中使用 offsetWidth 和 offsetHeight 获取元素的高度和宽度

offsetWidth 和 offsetHeight 是 HTML 元素的两个属性，用于获取 HTML 元素的高度和宽度。offsetHeight 和 offsetWidth 以像素 (px) 为单位，分别用于返回元素的布局高度和宽度。

如果元素被隐藏，它们将输出零 (0)。请记住，宽度和高度包括填充和边框。

下面是计算 offsetHeight 和 offsetWidth 的公式。

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

请参阅以下屏幕截图以可视化上述公式。

示例代码：

DOM Style offsetWidth and offsetHeight Property .box { width: 100px; height: 100px; border: 5px black solid; padding: 1px; background-color: blue; } let box = document.querySelector('.box'); let width = box.offsetWidth; let height = box.offsetHeight; console.log("offsetWidth = " + width); console.log("offsetHeight = "+height);

输出：

"offsetWidth = 112" "offsetHeight = 112" 在 JavaScript 中使用 clientWidth 和 clientHeight 获取元素的高度和宽度

clientWidth 和 clientHeight 是只读属性，它们返回元素的实际宽度和高度（以用户可见的像素为单位）。clientWidth 和 clientHeight 使用以下公式计算。

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

请参阅以下屏幕截图以可视化上述公式。

示例代码：

DOM Style clientWidth and clientHeight Property .box { width: 100px; height: 100px; border: 5px black solid; padding: 1px; background-color: blue; } let box = document.querySelector('.box'); let width = box.clientWidth; let height = box.clientHeight; console.log("clientWidth = " + width); console.log("clientHeight = "+height);

输出：

"clientWidth = 102" "clientHeight = 102" 在 JavaScript 中使用 scrolltWidth 和 scrollHeight 获取元素的高度和宽度

元素的 scrollWidth 和 scrollHeight 是只读属性，包括填充和内容的宽度和高度（由于溢出而可见和不可见）。scrollWidth 和 scrollHeight 使用以下公式计算。

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

让我们实现上述所有宽度和高度（偏移量、客户端和滚动）。

HTML 代码：

offsetWH,scrollWH,clientWH Get Offset Width/Height Get Client Width/Height Get Scroll Width/Height item item item item item item item item item

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 代码：

输出：

上一篇：在 JavaScript 中获取变量的类型

下一篇：JavaScript 设置会话变量

相关文章 JavaScript 设置会话变量

发布时间：2023/03/11 浏览次数：200 分类：WEB前端

本教程介绍会话以及如何在 JavaScript 中设置会话变量。

在 JavaScript 中获取变量的类型

发布时间：2023/03/11 浏览次数：122 分类：WEB前端

本教程详细介绍了如何查找变量 javascript 的类型。

使用 JavaScript 创建表格

发布时间：2023/03/11 浏览次数：83 分类：WEB前端

在本文中，我们将看到如何借助 JavaScript 创建表格。

JavaScript 动态变量名

发布时间：2023/03/11 浏览次数：119 分类：WEB前端

本教程介绍 JavaScript 动态变量名称。它告诉我们它是什么以及我们如何在 JavaScript 中使用动态变量名。

使用 JavaScript 查找第 N 个子元素

发布时间：2023/03/11 浏览次数：163 分类：WEB前端

在今天的文章中，我们将学习如何使用 JavaScript 找到元素的第 n 个子元素。

用 PHP 减去天数

发布时间：2023/03/10 浏览次数：120 分类：编程语言

在 PHP 中，我们使用一些函数从日期中减去日、月和年。

在 PHP 中获取日期的当前月份

发布时间：2023/03/10 浏览次数：151 分类：编程语言

本文介绍如何在 PHP 中获取当前月份>

在 PHP 中将数字转换为月份名称

发布时间：2023/03/10 浏览次数：190 分类：编程语言

本教程解释并详细说明如何使用 DateTime 对象和 date() 函数在 PHP 中将数字转换为月份名称并显示来自时间戳的月份名称。

如何在 PHP 中获取当前日期和时间

发布时间：2023/03/10 浏览次数：163 分类：编程语言

本文介绍如何获取 PHP 中的当前日期和时间。它包括 date()函数，time()函数，date_default_timezone_set()函数，format()函数和 setTimezone()函数。

转载请发邮件至 [email protected] 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

【本文地址】

在 JavaScript 中获取元素的高度和宽度

在 JavaScript 中获取元素的高度和宽度

今日新闻

推荐新闻