Home > Article > Web Front-end > How to get the height of hidden elements with jQuery?
How to get the height of hidden elements with jQuery?
- 青灯夜游Original
- 2019-04-17 10:35:353309browse
An HTML element can be hidden with the help of jquery's hide() function, or it can be easily hidden by using visibility:hidden; in css. We can also easily use jquery to find the height of this hidden element. The following article will introduce to you how to get the height of hidden elements in jQuery. I hope it will be helpful to you. [Video tutorial recommendation: jQuery tutorial]
Each HTML element defines two heights, namely the innerheight of the element and outerheight:
● innerHeight: This height is taken into account when the border width of the selected element is not considered.
●outerHeight: This height will be taken into account when considering the border width of the selected element.
Let’s take a look at the methods of obtaining these two heights through code examples.
Example 1: Get the innerHeight height of the hidden element
html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
border: 1px solid red;
padding: 10px;
width: 300px;
}
div {
width: 310px;
height: 80px;
font-weight: bold;
color: red;
font-size: 25px;
border: 1px solid red;
visibility: hidden;/*隐藏元素*/
}
</style>
</head>
<body>
<div>hello world!</div>
<p id="demo">
这里将显示隐藏的“div”元素的高度。
</p>
<button id="btn1">获取高度</button>
</body>
<script type="text/javascript" src="../demo/js/jquery.min.js"></script>
<script>
//jquery代码
</script>
</html>jquery code
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").innerHeight();
$("#demo").text(demo);
});
});Output:
Explanation: We use height: 80px; to set the height of the hidden div to 80; and jQuery’s innerHeight() function can obtain innerHeight height, border width will not be added to the result, so the obtained height is 80.
Example 2: Get the outerHeight of the hidden element
jquery code
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").outerHeight();
$("#demo").text(demo);
});
});Output:
Note: What you can get by using jQuery's outerHeight() function is the outerHeight height. The border width will be added to the result, so the obtained height is 82.
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to get the height of hidden elements with jQuery?. For more information, please follow other related articles on the PHP Chinese website!