javascript - 获取子元素的宽度纯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>

javascript:

window.onload = function(){

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

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

工作 js:

window.onload = function(){

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

Answer 1

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

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

演示:Fiddle