獲取Javascript中圖像的大小

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;

它說的是變量“寬度”和“高度”未定義。 我也嘗試使用img.width ＆ img.height 。

Answer 1

getElementsByClassName()就是這樣做的-通過類名得到元素秒 。

它不會返回單個Node-即使只有一個具有該類名稱的元素-而是所有元素的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

小提琴的例子

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

window.onload = getDimension();

只需在JavaScript中使用ID而不是類名即可。 檢查小提琴。