La méthode jQuery css()
Lorsqu’on souhaite manipuler les styles CSS des éléments en jQuery, la première méthode à connaitre est la méthode css().
On va pouvoir utiliser cette méthode de deux façons : soit en tant que getter afin d’obtenir la valeur liée à une propriété CSS d’un élément, soit en tant que setter pour définir des propriétés CSS et leurs valeurs pour une sélection d’éléments.
Pour obtenir la valeur liée à une propriété CSS pour un élément, on se contentera de préciser la propriété CSS dont on souhaite obtenir la valeur en argument de css().
Pour définir une propriété et sa valeur pour une sélection d’éléments, on devra passer deux arguments à css() : la propriété CSS et sa valeur.
Enfin, pour définir plusieurs propriétés et leurs valeur pour une sélection d’éléments d’une coup, nous allons suivre la syntaxe suivante : css({“prop1 : valeur”, “prop2 : valeur”}).
See the Pen
Cours jQuery 2.7.1 by Pierre (@pierregiraud)
on CodePen.
Les méthodes liées aux dimensions des éléments
jQuery met également à notre disposition une série de méthodes qui vont nous permettre d’obtenir ou de définir la largeur et la hauteur de nos éléments.
La méthode width() permet d’obtenir la largeur de la boite élément du premier élément d’une sélection ou de définir cette largeur pour tous les éléments de la sélection en lui passant dans ce cas la largeur sans unité en argument.
La méthode innerWidth() permet d’obtenir la largeur de la boite élément et du padding (marge intérieure) du premier élément d’une sélection ou de définir cette largeur pour tous les éléments de la sélection en lui passant dans ce cas la largeur sans unité en argument.
La méthode outerWidth permet d’obtenir la largeur de la boite élément, du padding (marge intérieure) et des bordures du premier élément d’une sélection ou de définir cette largeur pour tous les éléments de la sélection en lui passant dans ce cas la largeur sans unité en argument.
Notez qu’on va également pouvoir inclure la marge extérieure (margin) dans le calcul lors de la récupération de la largeur en passant le booléen true en argument de cette méthode.
Pour récupérer ou définir la hauteur d’un élément, nous allons utiliser les méthodes height(), innerHeight() et outerHeight() qui vont fonctionner exactement de la même manière que les précédentes.
La grande différence entre l’utilisation de css(“width”) et width() ou height() est que css() va renvoyer un nombre suivi d’une unité à la différence des autres méthodes qui ne vont renvoyer qu’un nombre.
On préfèrera donc utiliser width() et height() lorsqu’on devra manipuler ces données / effectuer des calculs avec car il est très simple de travailler avec des nombres en JavaScript.
See the Pen
Cours jQuery 2.7.2 by Pierre (@pierregiraud)
on CodePen.
Vous pouvez trouver le récapitulatif des dimensions récupérées par chaque méthode dans le schéma ci-dessous :
Les méthodes offset() et position()
La méthode offset() nous permet de récupérer la position courante du premier élément d’une sélection ou de redéfinir la position de tous les éléments de la sélection relativement au document. Pour être tout à fait précis, la position récupérée ou définie par offset() va être celle du coin supérieur gauche de la boite de bordure (boite incluant le contenu, les marges internes et la bordure) des éléments.
La méthode offset() va renvoyer un objet qui contient deux propriétés top et left qui contiennent les coordonnées de l’élément par rapport aux bords supérieur et gauche du document.
La méthode position() va également nous permettre de récupérer la position courante d’un élément mais, à la différence de offset(), cette position va être exprimée par rapport à celle du premier parent positionné de l’élément. La position récupérée va être celle du coin supérieur gauche de la boite de marge externe de l’élément exprimée relativement à la boite de padding de l’élément parent positionné.
La méthode position() renvoie également un objet qui contient deux propriétés top et left.
See the Pen
Cours jQuery 2.7.3 by Pierre (@pierregiraud)
on CodePen.
Les méthodes scrollLeft() et scrollTop()
Finalement, les méthodes scrollLeft() et scrollTop() vont respectivement nous permettre d’obtenir la position de la barre de défilement horizontale et verticale du premier élément d’une sélection ou de définir la position de ces barres pour chaque élément de la sélection.
Ces méthodes sont beaucoup plus spécifiques que les précédentes et relativement marginales. Nous ne les étudierons donc pas ici plus avant.
