在Internet Explorer中获取图像的宽度和高度

使用 .css() 获取存储值,如下所示:

jQuery('img').css('height');

我知道这听起来有点奇怪, but before you dismiss it, try it :)

var dimensions = {width: $(img).width(), height: $(img).height()};
$(img).hide();

或者,当由于隐藏和对值的需要分散开来而无法执行此操作时,可以在数据对象中保存高度和宽度

$(img).data('dimensions', {width: $(img).width(), height: $(img).height()});

然后您可以这样访问它们:

 $(img).data('dimensions').width;

您甚至可以使用以下代码确保页面上的所有图像都具有这些数据属性:

$(document).ready(function(){
    $('img').each(function(){ //embedded images
        $this = $(this);
        $this.data('dimensions', {width: $this.width(), height: $this.height()});
    });
    $('img').live('load', function(){ //inserted images
        $this = $(this);
        $this.data('dimensions', {width: $this.width(), height: $this.height()});
    });
});

Convert css width string to regular number

.hide() display: none )你可以把它藏起来 .css('visible', 'hidden') 然后 .width()/.height() 会有用的。

如果你不想改变主意 .hide() 那你就可以申请了 visible: hidden .show() 然后测量高度。测量完后,把它倒过来。对象被隐藏时仍会影响页面布局 可见:隐藏 -当心这个。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file" />
<script type="text/javascript" charset="utf-8">
$("#file").change(function(e) {
    var file, img;
    file = document.getElementById("file");
    if (file!=null) {
        img = new Image();
        img.src = file.value;
        img.onload = function() {
            alert(img.width + " " + img.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
    }

});
</script>