JavaScript offsetHeight

小灰灰 2020-06-02 13:50 363阅读 0赞

# JavaScript offsetHeight

offsetHeight 属性可以返回指定元素的布局高度，只读属性。

布局高度所涵盖的内容不仅包括 CSS height 定义的高度，还有其他内容。

属性的返回值是一个数字（不带任何单位，默认以像素计）。

语法结构：

```javascript
let num = dom.offsetHeight
```

红色横线框定之间是 offsetHeight 属性返回值，下面分析一下具体构成：

（1）.包含元素的高度，这个高度是 CSS height 属性规定的值。

（2）.包含上下内边距的尺寸。

（3）.不包含上下外边距的尺寸。

（4）.包含底部水平滚动条的高度（向内占据尺寸）。

offsetHeight 属性有几点再强调一下：

（1）.返回值是数值，不带任何单位，默认单位是像素。

（2）.与CSS height 不同，虽然可能在数值在相等。

（3）.如果元素的CSS display 属性值为none，返回值为0.

（4）.offsetHeight 返回值会对数值进行四舍五入取整，假如实际值是260.5，那么返回261。

**浏览器兼容：**

（1）.IE 浏览器支持此属性。

（2）.edge 浏览器支持此属性。

（3）.谷歌浏览器支持此属性。

（4）.opera 浏览器支持此属性。

（5）.火狐浏览器支持此属性。

（6）.safari 浏览器支持此属性。

**代码实例：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#ant {
  width :100px;
  height :50px;
  line-height :50px;
  text-align :center;
  border :10px solid #ccc;
  padding-top :10px;
  padding-bottom :5px;
  font-size :12px;
  color :green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  oDiv.innerHTML=oDiv.offsetHeight;
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>
```

将 offsetHeight 属性值写入 div 中，运行效果截图如下：
![](/images/1591105761366.jpg)

对上述代码分析如下：

（1）.属性返回值是数值类型，默认以像素计。

（2）.35 = height + border-top + border-bottom + padding-top + padding-bottom。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#box {
  width :200px;
  height :100px;
  line-height :100px;
  border:10px solid #ccc;
  padding-top :10px;
  text-align :center;
  font-size :12px;
  overflow :auto;
}
#ant {
  width :500px;
  height :20px;
  background :green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("box");
  console.log(oDiv.offsetHeight);
}
</script>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>
```

上述代码浏览器运行效果截图如下：

![](/images/1591105721113.jpg)

offsetHeight 属性值谷歌开发者工具控制台截图如下：

![](/images/1591105711170.png)

出现水平滚动条，offsetHeight 属性返回值包括这个滚动条的高度。

谷歌浏览器此高度为 17px（也许以后会变，也许其他浏览器的值不同，以实测为准）。

注意：滚动条的高度包括在 height 高度之内（height超过滚动条高度时候）。