Question

我有一个包含在几个DIV元素中的图像

<div id="wrapper">
...
<img src="myphoto.png" height="400px" width="500px>
</div>

我使用jQuery来访问我使用的高度或宽度

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

或

jQuery(img)[0].height;

不幸的是，当包装DIV'显示'属性改变时，这些值被设置为0 例如，如果我做

$('#wrapper').hide()
then
jQuery(img)[0].height = 0;

属性相同。

任何想法如何解决这个问题，显示DIV，获取值并再次隐藏它确实解决了问题，但我无法猜测包装DIV的数量（以及它们的行为会发生变化）。

由于

修改：感谢所有答案。但是，我忘了提到我不控制DIV的隐藏和风格。我的脚本使用图像进行播放，并且可以集成到任何页面中，因此用户可以隐藏/显示/更改值。

Answer 1

使用.css()来获取存储的值，如下所示：

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

我知道这听起来有点奇怪，but before you dismiss it, try it：）

Answer 2

与我的答案相同：

Convert css width string to regular number

您可以使用.hide()隐藏它，而不是使用display: none .css('visible', 'hidden')隐藏它，然后.width()/.height()将起作用。

如果您不想更改.hide()，则可以申请visible: hidden，然后.show()，然后测量身高。测量完之后，反过来。当visible: hidden隐藏对象时，对象仍会影响页面布局 - 请注意这一点。

为避免标签与布局混乱，您可以将位置设置为绝对位置，将其移至body标签然后进行测量。

Answer 3

我通常会这样做，当您在隐藏之前缓存宽度和高度时，您仍然可以使用它们。像这样：

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

Answer 4

<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>

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

4 个答案: