Maison > Article > interface Web > Quelles sont les méthodes pour manipuler les styles d’éléments dans jquery ?
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.
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)
Définissez la syntaxe de la propriété CSS :
$(selector).css(name,value)
2. :
$(selector).height()
3. Largeur()
Syntaxe pour renvoyer la largeur :$(selector).height(length)Syntaxe pour définir la largeur :
$(selector).width()
Exemple : Manipuler le style d'élément - modifier la largeur de l'élément
1. Utilisez la méthode width()
$(selector).width(length)
2. Utilisez la méthode css()
<!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>
jquery pour faire fonctionner indirectement les styles d'éléments
Dans jquery, vous pouvez opérer indirectement en exploitant les attributs d'élément Style d'élément.
Méthode
| addClass() | 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. |
| Exemple : utilisez attr() pour ajouter du style |
【Apprentissage recommandé :
Tutoriel vidéo 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!