méthode jquery pour obtenir la hauteur de l'image

jQuery est une bibliothèque JavaScript construite sur JavaScript, rendant le code écrit en JavaScript plus concis et plus facile à utiliser. Dans le processus de développement Web, il est souvent nécessaire d’obtenir des informations telles que la hauteur et la largeur des images. Ci-dessous, nous expliquerons comment obtenir la hauteur d'une image via jQuery.

1. Obtenez la hauteur de l'image grâce à l'élément img

En HTML, vous pouvez utiliser l'élément img pour intégrer des images. Nous pouvons utiliser le sélecteur jQuery pour obtenir l'élément et obtenir son attribut height. Le code est le suivant :

var height = $('img').height();

Le 'img' ici est un sélecteur utilisé pour sélectionner des éléments d'image dans le document. La méthode height() est utilisée pour obtenir la hauteur d'un élément et renvoie une valeur numérique. Étant donné que cette méthode obtient la hauteur de l'élément, à l'exclusion de la hauteur de la bordure et du remplissage, cette valeur de hauteur est inférieure à la hauteur de l'image réelle. Si vous avez besoin d'obtenir la hauteur, y compris les bordures et le remplissage, vous pouvez utiliser la méthode externalHeight().

2. Obtenez la hauteur de l'image via l'événement de chargement

Une autre façon d'obtenir la hauteur de l'image consiste à obtenir sa hauteur après le chargement de l'image. Nous pouvons utiliser la méthode load() pour lier un événement lorsque l'image est chargée et obtenir la hauteur de l'image dans la fonction de gestion des événements. Le code est le suivant :

$('img').on('load', function() {
  var height = $(this).height();
});

La méthode 'on' ici est utilisée pour lier l'événement de chargement. Notez que la méthode bind() ne peut pas être utilisée ici, car la méthode bind() ne peut être liée avec succès que lorsque l'image a été chargée et l'événement de chargement est déclenché après le chargement de l'image. Dans la fonction de gestion des événements, nous pouvons utiliser $(this) pour obtenir l'élément d'image qui déclenche actuellement l'événement, puis utiliser la méthode height() pour obtenir la hauteur de l'image.

3. Obtenez la hauteur de l'image grâce à l'objet Image nouvellement créé

Nous pouvons également obtenir la hauteur et la largeur de l'image en créant un nouvel objet Image. Le code est le suivant :

var img = new Image();
img.onload = function() {
  var height = this.height;
}
img.src = 'image.png';

Ici, nous créons d'abord un nouvel objet Image img et définissons son gestionnaire d'événement onload pour obtenir sa hauteur après le chargement de l'image. Ensuite, nous définissons l'attribut src de img pour commencer à charger l'image.

Il est à noter que cette méthode utilise l'objet Image natif JavaScript pour obtenir la hauteur de l'image, plutôt que d'obtenir l'élément image via le sélecteur jQuery. Par conséquent, si vous souhaitez utiliser d'autres méthodes de jQuery pour faire fonctionner cet objet Image, vous devez le convertir en un objet jQuery, par exemple :

$(img).appendTo('body');

Le code ci-dessus convertit l'objet Image créé img en un objet jQuery, puis ajoute au document.

En résumé, grâce aux méthodes ci-dessus, nous pouvons obtenir la hauteur de l'image via jQuery. Bien entendu, ces méthodes peuvent également être utilisées pour obtenir la largeur et d’autres propriétés de l’image. En utilisation réelle, nous devons choisir la méthode appropriée en fonction des besoins spécifiques.

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!