Как я могу получить атрибуты изображений?

Question

Как получить высоту и ширину изображения из тега IMG с помощью jQuery и использовать это значение в стиле div.

как

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

Я хочу использовать высоту изображения и применить к DIV. как 400px-20px. ширина div.

1008 * БЛАГОДАРЯ *

Answer 1

Вы можете использовать атрибуты

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

Или вы можете использовать методы измерения (они рассчитываются с помощью jQuery):

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

Редактировать (изменить ваши div)

$("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

Вы должны добавить имя класса к тегу изображения, чтобы сделать его более доступным с помощью jQuery:

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

После этого вы сможете напрямую получить доступ к высоте и ширине данного изображения, а не к любым другим изображениям на странице. Это полный пример выполнения действий после того, как документ готов.

$(function() {
    var $img = $('img.yourClassHere');
    $('.top, .bottom').css({ height: $img.attr('height'), width: $img.attr('width') }); 
});

Я также добавил несколько улучшений скорости в скрипт, уменьшив обходы DOM для доступа к вашему изображению.

Answer 3

У вас есть 2 способа получить высоту / ширину изображения.

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

См. http://docs.jquery.com/Attributes/attr

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

GOOGLE IT!