Question

我无法获得图片的尺寸。这是代码......

HTML：

<img class="edit-img about-img" src="images/box-model.jpg">

JavaScript：

function getDimension () {
    var img = document.getElementsByClassName('about-img');

    var width = img.clientWidth;
    var height = img.clientHeight;
}

window.onload = getDimension;

它说变量＆＃39;宽度＆＃39; ＆安培; ＆＃39;高度＆＃39;未定义。我也试过使用img.width＆amp; img.height。

Answer 1

getElementsByClassName()就是这样 - 按类名获取元素 s 。

它不会返回单个节点 - 即使只有一个具有该类名的元素 - 而是所有元素的NodeList。

你要找的是这样的：

var img = document.getElementsByClassName('about-img')[0];

var width = img.clientWidth;
var height = img.clientHeight;

然而，像这样硬编码索引假设只有一个具有该类名的图像。这可能并非总是如此，如果不是这样，那么只是采取第一个元素可能不会得到你想要的东西。在这种情况下，我会给图像一个ID：

<img class="edit-img about-img" id="my-image" src="images/box-model.jpg">

完成此操作后，您可以使用getElementById()，它可以按预期getElementsByClassName()运行：

var img = document.getElementById('my-image');

var width = img.clientWidth;
var height = img.clientHeight;

Answer 2

按照id属性选择元素，以获取您所指的图像。

function getDimension () {
    var img = document.getElementById('myId');
    var width = img.clientWidth;
    var height = img.clientHeight;
    console.log(width);
    console.log(height);
}

window.onload = getDimension();

<img id="myId" class="edit-img about-img" src="http://via.placeholder.com/350x150">

Answer 3

Fiddle example

function getDimension () {
    var img = document.getElementById('imageId');
    var width = img.clientWidth;
    var height = img.clientHeight;
    alert(width);
}

window.onload = getDimension();

只需在JavaScript中使用ID而不是类名。检查小提琴。

通过Javascript

3 个答案: