您的位置:首页> 前端教程> JS教程
文章导航

JavaScript offsetHeight

2018-11-13 17:33| 作者: admin| 查看: 3364| 评论: 0|来自: 蚂蚁部落

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

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

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

语法结构:

[JavaScript] 纯文本查看 复制代码
let num = dom.offsetHeight

布局高度图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/08/193504t5jfclc5e9l6lbnn.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

(1).包含元素的高度,这个高度是 CSS  height 属性规定的值。

(2).包含上下内边距的尺寸。

(3).包含上下外边距的尺寸。

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

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

(1).返回值是数值,不带任何单位,默认单位是像素。

(2).与CSS height 不同,虽然可能在数值在相等。

(3).如果元素的CSS display 属性值为none,返回值为0.

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

如果想要获取获取精确的值,推荐使用 getBoundingClientRect() 方法。

浏览器兼容:

(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.softwhy.com/" />
<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 中,运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/24/100721p0eeaal0a0c46msw.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码分析如下:

(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.softwhy.com/" />
<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>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/24/101600cpleeebb3ggm88oe.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/13/173629o3kw5rp8hhrd9ksd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

注意:滚动条的高度包括在 height 高度之内(height超过滚动条高度时候)。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部