JavaScript offsetHeight

17 Mar 2025 | 5 分钟阅读

offsetHeight 是一个 HTML DOM 属性，由 JavaScript 编程语言使用。它返回元素可见高度（以像素为单位），包括可见内容、边框、内边距和滚动条（如果存在）。offsetHeight 通常与 offsetWidth 属性一起使用。offsetWidth 是 HTML DOM 的另一个属性，与 offsetHeight 几乎相同。JavaScript 使用这些属性来查找 HTML 元素的可见高度和宽度。

offsetHeight 是以下 HTML 元素的组合

另一方面，offsetWidth 包括以下元素

请记住，offsetHeight 和 offsetWidth 都不包括外边距，无论是上外边距还是下外边距。这些 DOM 属性由 JavaScript 编程语言用于以像素为单位计算 HTML 元素的尺寸。

借助下图，您可以更好地理解 offsetHeight 和 offsetWidth。

浏览器支持

offsetHeight DOM 属性得到多个 Web 浏览器的支持，例如 Chrome 和 Internet Explorer。以下是一些支持 offsetHeight 和 offsetWidth 属性的浏览器。

浏览器	Chrome	Internet Explorer	Firefox	Opera	Safari	Edge
offsetHeight 支持	是的	是的	是的	是的	是的	是的

语法

以下是 offsetHeight 的简单语法

在这里，element 是在 JavaScript 中创建的一个变量，用于保存 CSS 属性值或 HTML 文本段落。

返回值

offsetHeight 和 offsetWidth 分别返回 HTML 元素的计算高度和宽度（以像素为单位）。

示例

以下是一些示例列表。通过这些示例，我们将了解 offsetHeight 属性是如何使用和工作的。

示例 1

<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>

<style>
#JTP {
height: 120px;
width: 250px;
margin: 20px;
padding: 15px;
background-color: yellow;
}
</style>
</head>

<script>
function getInfo() {
var eleValue = document.getElementById("JTP");
var txt = "Height of the elements paragraph along with padding and border in pixels is: " + eleValue.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>

<body>
<h2> HTML DOM offsetHeight Property example </h2>
<div id= "JTP">
<b> A basic information about this div tab: </b>
<p id= "sudo"> </p>
</div>
<button type="JTP" onclick="getInfo()"> Submit </button>

</body>
</html>

输出

请看下面的输出，其中包含一个黄色的高亮段落和一个提交按钮。点击此提交按钮，计算该段落的 offsetHeight。

点击提交按钮前的输出

点击提交按钮后的输出

计算出的 offsetHeight 将在此黄色高亮区域内显示。

示例 2

在此示例中，我们将计算提供的段落的 offsetHeight，并附带 CSS 样式。请记住，offsetHeight 不包括外边距。

<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>
<style>
#PStyle {
height: 220px;
width: 320px;
margin: 20px;
padding: 15px;
background-color: pink;
}
</style>
</head>

<script>
function getInfo() {
var eleValue = document.getElementById("PStyle");
var txt = "Height of the elements paragraph along with padding and border in pixels is: " + eleValue.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>

<body>
<h3> HTML DOM offsetHeight Property Example 2 </h3>
<div id= "PStyle">
<p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p>

<b> OffsetHeight of this div tab paragraph: </b>
<p id= "sudo"> </p>
</div>
<button type= "button" onclick = "getInfo()"> Calculate offsetHeight </button>

</body>
</html>

输出

请看下面的输出，其中包含一个粉色高亮段落和一个提交按钮。点击计算 offsetHeight 按钮，计算该段落的 offsetHeight。

点击计算 offsetHeight 按钮前的输出

点击计算 offsetHeight 按钮后的输出

计算出的 offsetHeight 将在此粉色高亮区域内显示。在下面的截图中，您可以看到给定段落的 offsetHeight 为 230px。

示例 3：无 CSS 样式

再看一个计算 offsetHeight 的例子。除了背景颜色外，我们没有包含任何 CSS 样式，如高度、宽度、外边距、内边距等。因此，该段落将是一个简单的段落，没有任何样式。

<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>
<style>
#PStyle {
background-color: orange;
}
</style>
</head>

<script>
function getInfo() {
var eleValue = document.getElementById("PStyle");
var txt = "Height of the elements in paragraph calculated as pixels is: " + eleValue.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>

<body>
<h3> HTML DOM offsetHeight Property Example 3 </h3>
<div id= "PStyle">
<p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p>

<b> OffsetHeight of this div tab paragraph: </b>
<p id= "sudo"> </p>
</div>
<button type= "submit" onclick = "getInfo()"> Calculate offsetHeight </button>

</body>
</html>

输出

请看下面的输出，其中包含一个橙色高亮段落和一个计算 offsetHeight 的提交按钮。点击计算 offsetHeight 按钮，计算该段落的 offsetHeight。

点击计算 offsetHeight 按钮前

点击计算 offsetHeight 按钮后

在下面的截图中，您可以看到给定段落的 offsetHeight 为 88px。

计算 offsetHeight 和 offsetWidth

在此示例中，我们将计算一个 div 标签内段落的 **offsetHeight** 和 **offsetWidth**。因此，您可以理解它们是如何不同计算的。在这里，我们将使用 CSS 为此示例中的样式传递高度、宽度、外边距、内边距等。

在您的系统上复制并运行以下代码以更好地理解。

<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>

<style>
#PStyle {
height: 180px;
width: 400px;
margin: 20px;
padding: 15px;
background-color: lightblue;
}
</style>
</head>

<script>
function getInfo() {
var eleValue = document.getElementById("PStyle");
var txt1 = "OffsetHeight of the paragraph along with padding and border in pixels is: " + eleValue.offsetHeight + "px";
var txt2 = "OffsetWidth of the paragraph along with padding and border in pixels is: " + eleValue.offsetWidth + "px";

document.getElementById("sudo1").innerHTML = txt1;
document.getElementById("sudo2").innerHTML = txt2;
}
</script>

<body>
<h2> Calculation of offsetHeight and offsetWidth </h2>
<div id= "PStyle">
<b> A basic information about this div tab: </b>
<p id= "sudo1"> </p>
<p id= "sudo2"> </p>
</div>
<button type="button" onclick="getInfo()"> Submit </button>

</body>
</html>

输出

请看下面的输出，其中包含一个浅蓝色高亮区域的段落和一个提交按钮。点击提交按钮，计算该段落的 offsetHeight 和 offsetWidth。

点击提交按钮前的输出

点击提交按钮后，计算出的 offsetHeight 为 210px，offsetWidth 为 430px，显示在此浅蓝色高亮区域内。请看下面的输出。

点击提交按钮后的输出

您已经看到了几个具有不同计算参数的示例。在这些各种示例中，我们传递了带有或不带 CSS 样式的文本段落，然后分别计算了 offsetHeight 和 offsetWidth。

下一主题Two-dimensional-array-in-javascript

JavaScript offsetHeight

浏览器支持

语法

返回值

示例

示例 1

示例 2

示例 3：无 CSS 样式

计算 offsetHeight 和 offsetWidth

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript offsetHeight

浏览器支持

语法

返回值

示例

示例 1

示例 2

示例 3：无 CSS 样式

计算 offsetHeight 和 offsetWidth

相关帖子

在 VS Code 中运行 JavaScript 代码

JavaScript 中的 Parse 含义

JavaScript 书签

JavaScript 中的 Marquee 事件

JavaScript Object.keys() 方法

JavaScript 为元素添加样式

JavaScript console.log() 方法

JavaScript 中的可枚举

Unshift JavaScript