js隐藏html页面元素高度,如何使用jQuery获取隐藏元素的高度？

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);

});

});

效果图：