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

【问题标题】：Get the width and height of an image in Internet Explorer在 Internet Explorer 中获取图像的宽度和高度
【发布时间】：2011-04-02 00:55:34
【问题描述】：

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

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

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

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

或

jQuery(img)[0].height;

不幸的是，当包装 DIV 'display' 属性发生变化时，这些值被设置为 0 例如，如果我这样做

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

属性也一样。

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

谢谢

编辑：感谢所有回答。但是，我忘了提到我不控制 DIV 隐藏和样式。我的脚本使用图像并集成到任何页面中，因此用户是隐藏/显示/更改值的人。

【问题讨论】：

标签： jquery html internet-explorer

【解决方案1】：

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

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

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

【讨论】：

只有在 CSS 或使用属性中明确设置宽度时才会起作用。（实际上，我注意到 OP 的图像有这些指定，仅适用于图像没有的其他情况）
@Pim：在这些情况下，您可以使用 window.getComputedStyle() (W3C) 或 element.currentStyle获取元素的计算样式> (IE6-8)。如果元素被隐藏，您可以显示它，获取尺寸并在更新显示之前再次隐藏它。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

和我这里的回答一样：

Convert css width string to regular number

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

如果您不想更改您的.hide()´s，那么您可以应用visible: hidden，然后应用.show()，然后测量高度。测量后，将其反转。当对象被visible: hidden 隐藏时，它们仍然会影响页面布局 - 请注意这一点。

为避免标签与布局混淆，您可以将位置设置为绝对位置，将其移动到body标签然后测量。

【讨论】：

这有不同的效果，因为<div> 仍会占用页面空间，通常这不是一个选项:)
是的，我又添加了一些。这也可以在没有 height 设置明确的情况下工作。
设置高度实际上是一个好的做法 :) 这样可以节省浏览器确定布局的时间，并且在加载图像后不会重新流动 :)
同意，在这种情况下，您的解决方案就是要走的路。但我也考虑了一般的标签。为您的解决方案 +1。

【解决方案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>

【讨论】：