获得子元素纯javascript的宽度

时间:2013-11-13 03:01:27

标签: javascript html

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 width并最终获得img高度我知道使用jQuery会更容易,但我想只使用JavaScript来实现它。 编辑: 我意识到我没有为img和项目指定数组

工作js:

window.onload = function(){

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

4 个答案:

答案 0 :(得分:2)

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

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

演示:Fiddle

答案 1 :(得分: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
};

答案 2 :(得分:0)

试试这个:

alert(img.clientWidth);

答案 3 :(得分:0)

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

此代码应该有效:

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

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