Maison  >  Article  >  interface Web  >  Comment modifier le style de hauteur minimale dans jquery

Comment modifier le style de hauteur minimale dans jquery

青灯夜游
青灯夜游original
2022-04-20 12:19:102205parcourir

Méthode de modification : 1. Utilisez css() pour définir un nouveau style, la syntaxe est "$(element).css("min-height","new value""); 2. Utilisez attr() pour l'ajouter. en définissant l'attribut de style Nouveau style, syntaxe "$(element).attr("style","min-height:new value")".

Comment modifier le style de hauteur minimale dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3. L'attribut

min-height est utilisé pour définir la hauteur minimale d'un élément. Cette propriété n’inclut pas le remplissage, les bordures ou les marges !

Alors, comment modifier le style min-height en utilisant jquery ?

Dans jquery, il prend en charge plusieurs façons de modifier le style de hauteur minimale. Laissez-moi vous le présenter ci-dessous.

Méthode 1 : utilisez la méthode css()

La méthode css() renvoie ou définit un ou plusieurs attributs de style de l'élément correspondant.

Utilisez la méthode css() pour ajouter directement une nouvelle valeur à l'attribut min-height et définir un nouveau style.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").css("min-height","100px");
				});
			});
		</script>
		<style>
			p{
				min-height:50px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
		<button>修改min-height样式</button>

	</body>

Comment modifier le style de hauteur minimale dans jquery

Méthode 2 : utilisez la méthode attr()

attr() pour définir ou renvoyer la valeur d'attribut de l'élément sélectionné.

Vous pouvez utiliser cette méthode pour définir l'attribut de style et ajouter un nouveau style en ligne pour écraser l'ancien style.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").attr("style","min-height:100px");
				});
			});
		</script>
		<style>
			p{
				min-height:50px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
		<button>修改min-height样式</button>

	</body>

Comment modifier le style de hauteur minimale dans jquery

【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