获取子元素纯javascript的宽度

Html:

我正在尝试使用纯JavaScript获得img宽度和最终的img高度，我知道使用jQuery要容易得多，但我只想使用JavaScript。 编辑： 我意识到我没有为img和项目指定数组

工作js：

window.onload = function(){

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

试试这个：

window.onload = function(){

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

---

我相信project.getElementsByTagName（'img'）；正在返回数组，即使它只有一个对象

试试像这样的东西

alert(img.clientWidth);

---

getElementsByClassName

和

getElementsByTagName

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

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

---

演示：

这不起作用的原因是.GetElementsByCassName（）和.getElementsByTagName（）都将元素包装在[object HTMLContainer]中，您需要从每个对象中选择第一个元素

此代码应适用于：

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

---

尝试

img.clientWidth

。有几个项目框和img我尝试添加img[0]。width但仍然没有结果！我刚刚意识到您没有声明变量img。谢谢，在阅读您的答案之前我重新确认了这一点，所以我做了一些不同的操作，但仍然有效。我给了您检查，因为它仍然是正确的解决方案。对不起，我意识到img是一个元素数组，它必须是img[0]。clientWidth

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

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

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