Maison  >  Article  >  interface Web  >  Comment changer la hauteur div en utilisant jquery

Comment changer la hauteur div en utilisant jquery

青灯夜游
青灯夜游original
2022-05-17 19:01:454264parcourir

3 méthodes : 1. Utilisez "$("div").height(height value)" pour définir une nouvelle valeur de hauteur ; 2. Utilisez "$("div").css("height","height value " )", ajoutez un nouveau style de hauteur ; 3. Utilisez "$("div").attr("style","height:value")".

Comment changer la hauteur div en utilisant jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1, ordinateur Dell G3.

Il existe de nombreuses façons de modifier la hauteur des éléments dans jquery :

  • height()

  • css()

  • attr()

1. La méthode modifier div Height

height() peut définir la hauteur des éléments correspondants. Syntaxe :

$("div").height(高度值)

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#but1").click(function() {
					$("div").height("30px");
				});
				$("#but2").click(function() {
					$("div").height("100px");
				});
			});
		</script>
		<style>
			div{
				height: 60px;
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>

		<div>
			一个div元素,高度60px
		</div>
		<br>
		<button id="but1">减小div高度</button>
		<button id="but2">增大div高度</button>
	</body>
</html>

Comment changer la hauteur div en utilisant jquery

2. Utilisez css() pour modifier la hauteur du div

Utilisez css() pour ajouter un style de hauteur à l'élément td Syntaxe :

$("div").css("height","高度值");

Exemple : Based. sur la méthode 1 exemple Modifier

$(document).ready(function() {
	$("button").click(function() {
		$("div").css("height","40px");
	});
});

Comment changer la hauteur div en utilisant jquery

3. Utilisez attr() pour modifier la hauteur du div

Utilisez attr() pour contrôler la valeur de l'attribut de style et ajouter le style de hauteur à l'élément td. Syntaxe :

$("div").attr("style","height:高度值")

Exemple : Modifier

$(document).ready(function() {
	$("button").click(function() {
		$("div").attr("style","height:100px")
	});
});

Comment changer la hauteur div en utilisant jquery

sur la base de l'exemple de la méthode 1 [Apprentissage recommandé : tutoriel vidéo jQuery, vidéo web front-end]

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