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

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 ширина.

БЛАГОДАРЯ

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(); 

Edit (Изменение ваших дивы)

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

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

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

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

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

GOOGLE IT!

Answer 3

Вы должны добавить имя класса тега изображения, чтобы сделать его более легко доступны с помощью 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 для доступа к вашему изображению.