Comment changer la hauteur div en utilisant jquery-Questions et réponses frontales-php.cn

Comment changer la hauteur div en utilisant jquery

青灯夜游

Libérer： 2022-06-08 16:27:13

original

4328 Les gens l'ont consulté

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(高度值)

Copier après la connexion

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>

Copier après la connexion

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","高度值");

Copier après la connexion

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

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

Copier après la connexion

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:高度值")

Copier après la connexion

Exemple : Modifier

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

Copier après la connexion

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!