How to get the height of hidden elements with jQuery?-JS Tutorial-php.cn

How to get the height of hidden elements with jQuery?

青灯夜游

Release： 2019-04-17 10:38:23

Original

3346 people have browsed it

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]

How to get the height of hidden elements with jQuery?

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>

Copy after login

jquery code

$(document).ready(function() {
   $("#btn1").click(function() {
      var demo = $("div").innerHeight();
      $("#demo").text(demo);
   });
});

Copy after login

Output:

How to get the height of hidden elements with jQuery?

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

Copy after login

Output:

How to get the height of hidden elements with jQuery?

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!