Categories: DOM对象tips

HTML DOM offsetHeight 属性 | DOM 对象：HTML DOM 元素对象

返回到：DOM 对象：HTML DOM 元素对象

定义和用法

offsetHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 px。

通常，元素的 offsetHeight 是一种元素 CSS 高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含 :before或 :after 等伪类元素的高度。

对于文档的 body 对象，它包括代替元素的 CSS 高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

如果元素被隐藏（例如：元素或者元素的祖先之一的元素的 style.display 被设置为 none），则返回 0。

提示: 该属性通常与 offsetWidth 属性一起使用。

提示: 使用 clientHeight 和 clientWidth 属性返回元素的可见高度和宽度，仅包括内边距（padding）。

提示： 元素添加滚动条，可以使用 overflow 属性。

这是一个只读属性。

浏览器支持

属性	谷歌	IE	火狐	苹果	opera
offsetHeight	Yes	Yes	Yes	Yes	Yes

语法

element.offsetHeight

技术细节

返回值：	返回一个整数，表示该元素的像素高度。

实例

获取 div 元素的高度，包含内边距（padding）和边框（border）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}
</style>
</head>
<body>

<p>点击按钮获取 div 元素的高度，包含内边距（padding）和边框（border）:</p>

<button >

以下实例演示了 clientHeight/clientWidth 和 offsetHeight/offsetWidth 属性的区别：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}
</style>
</head>
<body>

<p>点击按钮获取 div 的 clientHeight, clientWidth, offsetHeight 和 offsetWidth 属性值。</p>

<button >

以下实例演示了在元素添加滚动条后 clientHeight/clientWidth 和 offsetHeight/offsetWidth 属性的区别：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
  overflow: auto;
}

#myDIV2 {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: lightyellow;
}
</style>
</head>
<body>

<p>在这个实例中，子 div 元素 (#content) 插入到第一个 div 中，由子 div 元素 比第父 div元素 (#myDIV) 大， 
(子元素为 800x2500 ，父元素为 250x400), 所以我们使用了滚动条。</p>

<p>点击按钮获取 div 元素的 clientHeight, offsetHeight, clientWidth 和 offsetWidth 属性值。</p>

<button >

terry

这个人很懒，什么都没有留下～