DOM offsetHeight属性用于以整数形式返回元素的布局高度。以像素为单位。它包括高度,边框,填充和水平滚动条,但不包括边距。如果元素是隐藏的,则返回0。
用法:
element.offsetHeight
返回值:它以整数形式返回元素的布局高度。
范例1:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetWidth Property
</title>
<style>
#GFG {
height:150px;
width:300px;
padding:10px;
margin:15px;
background-color:green;
}
</style>
</head>
<body>
<h2>DOM offsetHeight Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<p id="sudo"></p>
</div>
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
var elmnt = document.getElementById("GFG");
var txt = "Height including padding and border:"
+ elmnt.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
</body>
</html>
输出:
- 在单击按钮之前:
- 单击按钮后:
示例2:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetWidth Property
</title>
<style>
#GFG {
height:150px;
width:300px;
padding:10px;
margin:15px;
background-color:green;
}
</style>
</head>
<body>
<h2>DOM offsetHeight Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<br>
<p id="sudo"></p>
</div>
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
var elmnt = document.getElementById("GFG");
var txt = "";
txt += "Height with padding:"
+ elmnt.clientHeight + "px<br>";
txt += "Height with padding and border:"
+ elmnt.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
</body>
</html>
输出:
- 在单击按钮之前:
- 单击按钮后:
支持的浏览器:DOM offsetHeight属性支持的浏览器如下:
- 谷歌浏览器
- IE浏览器
- 火狐浏览器
- Opera
- 苹果浏览器
相关用法
- HTML Map name用法及代码示例
- HTML DOM name用法及代码示例
- HTML li value用法及代码示例
- HTML DOM specified用法及代码示例
- HTML DOM value用法及代码示例
- HTML Bdo dir用法及代码示例
- HTML DOM dir用法及代码示例
- HTML DOM URL用法及代码示例
- HTML DOM id用法及代码示例
- HTML IFrame name用法及代码示例
- HTML Button value用法及代码示例
- HTML DOM accessKey用法及代码示例
- HTML Button name用法及代码示例
- HTML Textarea name用法及代码示例
注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM offsetHeight Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。