3

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 指定数组

工作js：

window.onload = function(){

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

4 回答 4

3

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

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

演示：小提琴

于 2013-11-13T03:17:44.637 回答
1

我相信 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
};
于 2013-11-13T03:11:02.897 回答
0

试试这个：

alert(img.clientWidth);
于 2013-11-13T03:04:12.867 回答
0

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

此代码应该可以工作：

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

    console.log(img[0].clientWidth);
};
于 2013-11-13T03:28:26.100 回答