Размер изображения с JQuery без предварительно определенного в теге, а затем перейти к CSS

Question

Есть ли способ узнать ширину и высоту следующего изображения с помощью Jquery?

<div id="imgBox"><img id="imgID" src="images/koala.gif" /></div>

Затем передать его в CSS?

<style type="text/css">
   #imgBox, #imgBox img { width:imageWidth; height:imageHeight }
</style>

Я думаю ...

<script type="text/javascript">
    $(document).ready(function(){
       var imageWidth = $("#imgBox").width();
       var imgHeight = $("#imgID").height();        
    });
</script>

Answer 1

Почему бы вам не установить CSS динамически?

$(document).ready(function(){
   // make sure img is loaded:
   $("#imgID").load(function() {
       var $this = $(this);

         // Set dimensions of box  using dimensions of img
       $("#imgBox").css("width",  $this.width());      
       $("#imgBox").css("height", $this.height());
   });       
});

Вы, конечно, можете добавить значения $this.width() и $this.height(), когда установите css для #imgBox, если вам это необходимо по эстетическим соображениям ... скажем, если у вас есть фоновое изображение в #imgBox Вы хотите показать края.

Answer 2

вы можете сделать это так, но можете ли вы сказать, почему вы хотите перезаписать CSS.

        var $imgId = $('#imgId');
        var h = $imgId.height();
        var w = $imgId.width();

делайте всю свою математику здесь

 $imgId.css('height', yourcalculatedheight);
 $imgId.css('width', yourcalculatedweight);

вы можете разобрать dom и изменить его, вместо того, чтобы идти и менять css, что может быть хорошим подходом

Answer 3

Вы могли бы сделать

$(function() {
    var imgSrc = $('#imgId').attr('src');        
    var image = new Image();
    var width, height;       
    image.onload = function() {
        width = image.width;
        height = image.height;
    };
    image.src = imgSrc;        

});

Вы можете написать CSS с помощью JavaScript.

$('<style />', {
    html: '#imgBox, #imgBox img { width:' + width + 'px; height:' + height + 'px }',
    type: 'text/css'
}).appendTo('head');

Но , зачем вам это нужно?