Maison > Article > interface Web > Comment obtenir la hauteur des éléments cachés avec jQuery ?

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

青灯夜游original: 2019-04-17 10:35:353314parcourir

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]

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>

code jquery

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

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une fonction récursive en jsArticle suivant：Comment implémenter une fonction récursive en js

Articles Liés

Voir plus