Comment puis-je récupérer les attributs d'images?

Question

Comment récupérer la hauteur et la largeur de l'image à partir de la balise IMG en utilisant jQuery et utiliser cette valeur dans le style div.

comme

<div class=top>&nbsp;</div> 
<img src="source.jpg" width="200" height="400" alt="" /> 
<div class="bottom">&nbsp</div> 

Je veux utiliser la hauteur de l'image et et appliquer à la DIV. comme 400px-20px. largeur div.

THanks

Answer 1

Vous pouvez utiliser les attributs

$("img[src=source.jpg]").attr("width"); 
$("img[src=source.jpg]").attr("height"); 

Ou vous pouvez utiliser les méthodes de dimension (ils sont calculés par jQuery):

$("img[src=source.jpg]").width(); 
$("img[src=source.jpg]").height(); 

Modifier (Modifier vos divs)

$("div.top").add("div.bottom").css({ 
     width: $("img[src=source.jpg]").attr("width") - 20,//<- your minus 20 goes here 
     height: $("img[src=source.jpg]").attr("height") 
}); 

Answer 2

Vous avez 2 façons d'obtenir la hauteur/largeur d'une image.

1) var height = $("img").attr("height");

Voir http://docs.jquery.com/Attributes/attr

2) var height = $("img").height();

GOOGLE IT!

Answer 3

Vous devez ajouter un nom de classe à votre balise d'image pour le rendre plus facilement accessible en utilisant jQuery:

<img src="source.jpg" class="yourClassHere" width="200" height="400" alt="" /> 

Vous serez alors en mesure d'accéder directement à la hauteur de cette image particulière et la largeur et pas d'autres images sur la page. C'est l'exemple complet, effectuer les actions après que le document est prêt. J'ai également ajouté quelques améliorations de vitesse au script en réduisant les parcours DOM pour accéder à votre image.