原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
offsetHeight属性返回表示元素高度(不等同于CSS的height属性)的数值,只读属性。
可以结合offsetWidth属性一起学习。
需要特别说明两点:
(1).返回值不带单位,默认单位值是像素(px)。
(2).此高度值与通过CSS为元素设置的height属性值含义并不相同。
返回表示高度的数值由如下几个要素构成:
(1).CSS规定的height属性值。
(2).上内边距(padding-top)与下内边距(padding-bottom)。
(3).上边框(border-top)与下边框(boder-bottom)的厚度。
(4).包含水平滚动条的厚度。
语法结构:
[JavaScript] 纯文本查看 复制代码let num = dom.offsetHeight
图示如下:
红色横线框定之间的高度就是offsetHeight属性的返回值。
需要注意的是,外边距从来不在此属性返回值范围之内。
浏览器兼容:
(1).IE浏览器支持此属性。
(2).edge浏览器支持此属性。
(3).谷歌浏览器支持此属性。
(4).opera浏览器支持此属性。
(5).火狐浏览器支持此属性。
(6).safria浏览器支持此属性。
代码实例:
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #box{ width:200px; height:100px; line-height:100px; background:red; text-align:center; font-size:12px; overflow:auto; border:10px solid blue; padding-top:10px; padding-bottom:5px; } #ant{ width:500px; height:20px; background:#ccc; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); odiv.innerHTML=odiv.offsetHeight; } </script> </head> <body> <div id="box"></div> </body> </html>
上述代码会在div元素中显示其offsetHeight值。
值的构成:135=height + border-top + border-bottom + padding-top + padding-bottom。
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #box{ width:200px; height:100px; line-height:100px; background:red; text-align:center; font-size:12px; border:10px solid blue; padding-top:10px; overflow:auto; } #ant{ width:500px; height:20px; background:green; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); console.log(odiv.offsetHeight); } </script> </head> <body> <div id="box"> <div id="ant"></div> </div> </body> </html>
代码返回值截图如下:
上述代码中,出现了水平滚动条,offsetHeight属性返回值包括这个滚动条的高度。
在谷歌浏览器此高度为17px(也许以后会变,也许其他浏览器的值不同,以实测为准)。
注意:滚动条的高度包括在height高度之内(height超过滚动条高度时候)。
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } #box{ height:600px; width:800px; line-height:600px; color:white; background-color:blue; } .float{ width:800px; height:200px; background-color:red; float:left; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); odiv.innerHTML=document.body.offsetHeight; } </script> </head> <body> <div id="box"></div> <div class="float"></div> </body> </html>
前面介绍的都是普通HTML元素的offsetHeight属性值。
对于body,offsetHeight返回值有一点特别,那么就是浮动元素向下延展的高度不在计算范围内。
比如上面的代码,底部的div是浮动的,那么它的高度不在计算范围之内。
大家可以将float属性删除,再看一下offsetHeight属性的返回值。
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落
最新评论