如何使用JavaScript获取图像的宽度和高度？_Javascript_Html

如何使用JavaScript获取图像的宽度和高度？

javascript html

如何使用JavaScript获取图像的宽度和高度？,javascript,html,Javascript,Html,我试图通过使用下面的代码获得我的图像宽度和高度，但是我收到的所有信息都是未定义的有人能给我解释一下这是怎么回事吗 <script> var img = new Image(); img = document.getElementById("top"); alert(this.width + 'x' + this.height); </script> <body> <div id="ad"> <div id="bann

我试图通过使用下面的代码获得我的图像宽度和高度，但是我收到的所有信息都是未定义的

有人能给我解释一下这是怎么回事吗

<script>
var img = new Image();
img = document.getElementById("top");
alert(this.width + 'x' + this.height);
</script>
<body>
    <div id="ad">
        <div id="banner">
            <img class="top" id="top" src="frame_2.jpg"/>
        </div>
    </div>
</body>

在这种情况下，这很可能指向窗口。试试img.width和img.height。你可以用clientWidth和clientHeight来实现这一点

请参见并尝试以下操作：

img=document.getElementByIdtop； img.onload=函数{ 警报img.width+'x'+img.height； };

首先，如果要从文档中获取图像，则不需要调用new image

您确实需要等待img元素存在，直到img加载

如果将图像与脚本一起添加，并在设置src之前挂起load事件，那么这是最简单的：

但是，您可以使用HTML中的图像来执行此操作，只需考虑图像在挂接事件之前可能已经加载：

<body>
    <div id="ad">
        <div id="banner">
            <img class="top" id="top" src="frame_2.jpg"/>
        </div>
    </div>
<script>
var img = document.getElementById("top");
img.onload = loaded;
if (img.complete) {
    loaded();
}
function loaded() {
  if (img) {
      alert(img.width + 'x' + img.height);
      img.onload = null;
      img = null; // Just as a marker in case of repeated calls
  }
};
</script>
</body>

为什么不试试简单的jQuery呢

var imageWidth = $('#top').width();
var imageHeight = $('#top').height();
alert(imageWidth + 'x' + imageHeight);

如果以后使用DOM上查询的元素重新分配该变量，则不需要创建Image的实例

顺便说一下，您需要等待为媒体对象事件指示的Dom就绪或加载的窗口

document.addEventListener'DOMContentLoaded'，函数{ var img=document.querySelector'.my image'； document.querySelector'result'.innerHTML=img.width+'x'+img.height； }; 我试图通过使用下面的代码获得我的图像宽度和高度，但是我收到的所有信息都是未定义的

这是因为您试图在创建DOM之前在DOM中选择该图像

如果你想得到图像尺寸，你可以用很多方法。如果您只需检查它们，您可以执行以下操作：

CSS和其他样式-可能会改变问题的结果

使用属性：自然宽度和自然高度

它们提供了正确的图像大小。

或img.clientWidth和img.clientHeight，如果您需要响应的高度和宽度。更不用说多余的新图像，也不用等待图像渲染，负载更少。这不是你想的。你确定你想写这篇文章吗？请参阅以获取信息的其他方法，取决于您感兴趣的宽度和高度的版本。值得注意的是，脚本标记需要位于img之后，或者等待DOMContentReady，否则getElementById将返回null。这将是一场代码有时会失败的竞赛，特别是当映像在缓存中时。需要添加img.onload并在那里执行写入操作-当触发DOMContentLoaded时，映像不一定已加载。我现在在示例中看到了0 x 0。正如我下面所说的，对于媒体对象，例如图像、视频、ecc。window.onload事件更正确。。。如果将事件附加到单个图像，则无法处理更多图像。。。全局窗口事件运行良好！因为对于这个任务来说，这太过分了。而且，如果OP只是在他们当前的代码所在的地方出错，那么它将由于两个不同的原因失败。

<body>
    <div id="ad">
        <div id="banner">
            <img class="top" id="top" src="frame_2.jpg"/>
        </div>
    </div>
<script>
var img = document.getElementById("top");
img.onload = loaded;
if (img.complete) {
    loaded();
}
function loaded() {
  if (img) {
      alert(img.width + 'x' + img.height);
      img.onload = null;
      img = null; // Just as a marker in case of repeated calls
  }
};
</script>
</body>

var imageWidth = $('#top').width();
var imageHeight = $('#top').height();
alert(imageWidth + 'x' + imageHeight);

<body>
    <div id="ad">
        <div id="banner">
            <img class="top" id="top" src="frame_2.jpg" onload="console.log(this.width + ' x ' + this.height + ' px');"/>
        </div>
    </div>
</body>