Quelles sont les méthodes pour manipuler les styles d'éléments dans jquery ?-Questions et réponses frontales-php.cn

Méthodes pour utiliser les styles : 1. css(), définit l'attribut de style de l'élément ; 2. height(), définit la hauteur de l'élément ; 3. width(), définit la largeur de l'élément ; (), définit la position relative de l'élément Le décalage sur le côté gauche de la barre de défilement ; 5. scrollTop(), définit le décalage de l'élément par rapport au haut de la barre de défilement ; 6. attr(), exploite le style en contrôlant les attributs id, class et style de l'élément ; 7. prop(), Manipulez les styles en contrôlant le style et d'autres attributs des éléments.

Quelles sont les méthodes pour manipuler les styles d'éléments dans jquery ?

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

Méthode jquery pour faire fonctionner directement les styles d'éléments

Propriétés CSS	Description
css()	Définit ou renvoie les propriétés de style des éléments correspondants.
height()	Définit ou renvoie la hauteur de l'élément correspondant.
offset()	Renvoie la position du premier élément correspondant par rapport au document.
position()	Renvoie la position du premier élément correspondant par rapport à l'élément parent.
scrollLeft()	Définissez ou renvoyez le décalage de l'élément correspondant par rapport au côté gauche de la barre de défilement.
scrollTop()	Définissez ou renvoyez le décalage de l'élément correspondant par rapport au haut de la barre de défilement.
width()	Définit ou renvoie la largeur de l'élément correspondant.

1. css()

Renvoie la syntaxe de la valeur de la propriété CSS :

$(selector).css(name)

Copier après la connexion

Définissez la syntaxe de la propriété CSS :

$(selector).css(name,value)

Copier après la connexion

2. :

$(selector).height()

Copier après la connexion

3. Largeur()

Syntaxe pour renvoyer la largeur :

$(selector).height(length)

Copier après la connexion

Syntaxe pour définir la largeur :

$(selector).width()

Copier après la connexion

Exemple : Manipuler le style d'élément - modifier la largeur de l'élément

1. Utilisez la méthode width()

$(selector).width(length)

Copier après la connexion

2. Utilisez la méthode css()

Quelles sont les méthodes pour manipuler les styles déléments dans jquery ?

<!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() {
					$("img").width("200px");
				});
			});
		</script>
	</head>
	<body>

		<img  src="1.jpg"    style="max-width:90%"/ alt="Quelles sont les méthodes pour manipuler les styles d'éléments dans jquery ?" ><br>
		<button>修改元素的宽度</button>
	</body>
</html>

Copier après la connexion

jquery pour faire fonctionner indirectement les styles d'éléments Quelles sont les méthodes pour manipuler les styles déléments dans jquery ?

Dans jquery, vous pouvez opérer indirectement en exploitant les attributs d'élément Style d'élément.

Méthode

DescriptionaddClass()Ajoute le nom de classe spécifié à l'élément correspondant. attr()Définissez ou renvoyez les attributs et les valeurs de l'élément correspondant. prop()Définissez ou retournez l'attribut/valeur de l'élément sélectionné removeAttr()Supprimez l'attribut spécifié de tous les éléments correspondants. removeClass()Supprimez toutes les classes ou celles spécifiées de tous les éléments correspondants. toggleClass()Ajoutez ou supprimez une classe de l'élément correspondant. Lorsque vous utilisez la méthode attr() pour définir l'attribut de style d'un élément, vous pouvez ajouter des styles CSS à l'élément.

$(document).ready(function() {
	$("button").click(function() {
	 $("img").css("width","250px");
	});
});

Copier après la connexion

【Apprentissage recommandé :

Tutoriel vidéo jQuery

, Quelles sont les méthodes pour manipuler les styles déléments dans jquery ? Vidéo d'introduction au front-end Web

】

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!

Étiquettes associées：

jquery

source：php.cn

Article précédent：Comment masquer l'élément parent dans jquery Article suivant：Comment supprimer les barres de défilement de la grille de données dans jquery

Déclaration de ce site Web

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

Derniers articles par auteur