使用纯JavaScript获取子元素的宽度

Question

HTML：

<div class="project-box">
 <img src="img/ifix.jpg" class="thumbnail img-responsive">
   <div class="hover-box">
     <h2>TITLE</h2>
     <p>Description of title</p>
   </div>
 </div>

javascipt:

window.onload = function(){

var project = document.getElementsByClassName('project-box');
img = project.getElementsByTagName('img');
  alert(img.clientWidth); 
};

我想使用纯JavaScript获取img的宽度，最终可以获取img的高度。我知道使用jQuery会更容易，但是我想仅使用JavaScript来完成。

编辑：

我意识到我没有为img和project指定数组。

可工作代码如下：

window.onload = function(){

var project = document.getElementsByClassName('project-box');
img = project[0].getElementsByTagName('img');
 alert(img[0].offsetWidth);
};

- swsa

---

尝试使用 img.clientWidth。 - Travesty3

Answer 1

getElementsByClassName和getElementsByTagName都返回一个对象数组，因此你需要通过索引访问实际的元素，然后调用其方法/属性。

window.onload = function () {
    var project = document.getElementsByClassName('project-box')[0];
    var img = project.getElementsByTagName('img')[0];
    alert(img.clientWidth);
};

演示： Fiddle

- Arun P Johny

---

谢谢，我在阅读你的答案之前就意识到了这一点，所以我做了一些不同的事情，但仍然有效。我给了你勾选，因为它仍然是正确的解决方案。 - swsa

Answer 2

我相信project.getElementsByTagName('img');返回的是一个数组，即使它只有一个对象。

尝试类似以下内容：

window.onload = function(){

var project = document.getElementsByClassName('project-box');
img = project.getElementsByTagName('img');
  alert(img.pop().width); //This should remove the element from the array and then call width
};

- Gino

---

有几个项目框和图片，我尝试添加img[0].width，但仍然没有结果。 - swsa

哦！我刚意识到你没有声明变量img。 - Gino

Answer 3

试一下这个：

alert(img.clientWidth);

- StaleMartyr

---

抱歉，我意识到 img 是一个元素数组，应该是 img [0] .clientWidth。 - StaleMartyr

Answer 4

这不起作用的原因是因为.getElementsByClassName()和.getElementsByTagName()都将元素包装在[object HTMLContainer]中，您需要从这些对象中选择第一个元素。

这段代码应该可以工作：

window.onload = function()
{
    var project = document.getElementsByClassName('project-box');
            img = project[0].getElementsByTagName('img');

    console.log(img[0].clientWidth);
};

- Jacob Mulquin