HTML元素可以在jquery hide()函数的帮助下隐藏，或者也可以通过在css中使设置visibility:hidden来轻松隐藏。那么如何使用jquery找到这个隐藏元素的高度？下面本篇文章就来给大家介绍一下使用jQuery获取隐藏元素高度的方法，希望对大家有所帮助。
每个HTML元素定义了两种高度，即元素的innerHeight和outerHeight：
1、innerHeight：当不考虑所选元素的边框宽度时，会考虑此高度。
2、outerHeight：当考虑所选元素的边框宽度时，将考虑此高度。
在jQuery中可以使用innerHeight()和outerHeight()方法来分别获取元素这两种高度。下面就通过示例来看看这两种方法如何使用。
示例1：使用innerHeight()方法计算隐藏元素的innerHeight
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid green;
visibility: hidden;
}
body {
border: 1px solid green;
padding: 10px;
width: 300px;
}
这里将显示隐藏的“div”元素的高度。
Submit
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").innerHeight();
$("#demo").text(demo);
});
});
效果图：
示例2：使用outerHeight()方法计算隐藏元素的outerHeight
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid red;
visibility: hidden;
}
body {
border: 1px solid red;
padding: 10px;
width: 300px;
}
这里将显示隐藏的“div”元素的高度。
Submit
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").outerHeight();
$("#demo").text(demo);
});
});
效果图：
