Comment obtenir la hauteur des éléments cachés avec jQuery ?-js tutoriel-php.cn

Comment obtenir la hauteur des éléments cachés avec jQuery ?

青灯夜游

Libérer： 2019-04-17 10:38:23

original

3337 Les gens l'ont consulté

Un élément HTML peut être masqué à l’aide de la fonction hide() de jquery ou peut être facilement masqué en utilisant visible:hidden en css. On peut aussi facilement utiliser jquery pour trouver la hauteur de cet élément caché. L'article suivant vous expliquera comment obtenir la hauteur des éléments cachés dans jQuery. J'espère qu'il vous sera utile. [Recommandation du didacticiel vidéo : Tutoriel jQuery]

Comment obtenir la hauteur des éléments cachés avec jQuery ?

Chaque élément HTML définit deux hauteurs, à savoir le innerheight et le outerheight de l'élément :

Quantity　innerHeight : Cette hauteur sera prise en compte lorsque la largeur de bordure de l'élément sélectionné n'est pas prise en compte.

Quantity　outerHeight : Cette hauteur sera prise en compte lors de la prise en compte de la largeur de bordure de l'élément sélectionné.

Ce qui suit est un exemple de code pour voir comment obtenir ces deux hauteurs.

Exemple 1 : Obtenir la hauteur intérieure de l'élément caché

code html

<!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>

Copier après la connexion

code jquery

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

Copier après la connexion

Sortie :

Comment obtenir la hauteur des éléments cachés avec jQuery ?

Description : Nous utilisons height: 80px; pour définir la hauteur du div caché à 80 ; la fonction innerHeight() de jQuery peut obtenir la hauteur innerHeight, la la largeur de la bordure n'est pas ajoutée au résultat, la hauteur obtenue est donc de 80.

Exemple 2 : Obtenir la hauteur externe de l'élément caché

code jquery

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

Copier après la connexion

Sortie :

Comment obtenir la hauteur des éléments cachés avec jQuery ?

Explication : Ce que vous pouvez obtenir en utilisant la fonction externalHeight() de jQuery est la hauteur externalHeight. La largeur de la bordure sera ajoutée au résultat, donc la hauteur obtenue est de 82.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!