最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Getting the width of child element pure javascript - Stack Overflow

programmeradmin0浏览0评论

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

I'm trying to get the img width and eventually the img height using pure JavaScript I know this is a lot easier with jQuery but I want to do it using only JavaScript. EDIT: I realized I was not specifying the array for the img and project

working js:

window.onload = function(){

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

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

I'm trying to get the img width and eventually the img height using pure JavaScript I know this is a lot easier with jQuery but I want to do it using only JavaScript. EDIT: I realized I was not specifying the array for the img and project

working js:

window.onload = function(){

var project = document.getElementsByClassName('project-box');
img = project[0].getElementsByTagName('img');
 alert(img[0].offsetWidth);
};
Share Improve this question edited Nov 13, 2013 at 3:17 swsa asked Nov 13, 2013 at 3:01 swsaswsa 2251 gold badge5 silver badges13 bronze badges 1
  • Try img.clientWidth. – Travesty3 Commented Nov 13, 2013 at 3:03
Add a ment  | 

4 Answers 4

Reset to default 3

Both getElementsByClassName and getElementsByTagName returns an array of objects, so you need to access the actual element by its index then call its methods/properties

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

Demo: Fiddle

I believe project.getElementsByTagName('img'); is returning an array, even if it only has one object.

Try something like

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

Try this one:

alert(img.clientWidth);

The reason this is not working is because .getElementsByClassName() and .getElementsByTagName() both wrap elements inside an [object HTMLContainer], you need to select the first element from each of these objects.

This code should work:

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

    console.log(img[0].clientWidth);
};
发布评论

评论列表(0)

  1. 暂无评论