JavaScript offsetHeight属性

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

offsetHeight是以下HTML元素的组合：HTML元素：

offsetHeight = height + border + padding + horizontal scrollbar

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

offsetWidth = width + border + padding + vertical scrollbar

记住一件事，offsetHeight和offsetWidth不包括margin，包括上边距和下边距都不计算在内。这些DOM属性是由JavaScript编程语言用来计算HTML元素的像素尺寸。

通过下面的图表，您可以更好地理解offsetHeight和offsetWidth：

JavaScript offsetHeight属性

浏览器支持

offsetHeight DOM属性被许多网络浏览器支持，例如 Chrome 和 Internet Explorer。以下是一些支持offsetHeight和offsetWidth属性的浏览器。

语法

下面是offsetHeight的简单语法：

element.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。

点击提交按钮前的输出

JavaScript offsetHeight属性

单击”提交”按钮后的输出

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

JavaScript offsetHeight属性

示例2

在这个示例中，我们将计算在本示例中提供的带有CSS样式的段落的offsetHeight。请记住，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 按钮之前的输出

JavaScript offsetHeight属性

点击“计算offsetHeight”按钮后的输出

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

JavaScript offsetHeight属性

示例3 无 CSS 样式

查看另一个计算 offsetHeight 的示例。我们没有包含任何 CSS 样式，如 height、width、margin、padding 等，只有背景颜色。所以，这个段落只是一个简单的段落，没有任何样式。

<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按钮之前

JavaScript offsetHeight属性

点击Calculate offsetHeight按钮后

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

JavaScript offsetHeight属性

计算偏移高度和偏移宽度

在这个示例中，我们将计算一个div标签内的一个段落的偏移高度和偏移宽度。这样，你可以理解它们是如何不同计算的。在这里，我们将使用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。

点击提交按钮前的输出

JavaScript offsetHeight属性