I need to get the current width of an image, so I tried my hand at some javascript. Note, I'm working on Zen Cart, so adding classes to img src is not an option as images are output using code such as

<?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT); ?>

So I wrapped the image in a span so that it would be the same width as the image like this.

<span id="imageContainer">
  <?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT); ?>
</span

The relevant line in my javascript is

imageSize = document.getElementById("imageContainer").clientWidth;

If I output to console.log it returns 0

However, if I change the span to

<div id="imageContainer">

then it correctly returns the size of the image, however, I can't use a div as that extends beyond the size of the image once the viewport increases beyond the width of the image.

So the question is, why doesn't document.getElementById work on a span, and is there a way around it?

I need to get the current width of an image, so I tried my hand at some javascript. Note, I'm working on Zen Cart, so adding classes to img src is not an option as images are output using code such as

<?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT); ?>

So I wrapped the image in a span so that it would be the same width as the image like this.

<span id="imageContainer">
  <?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT); ?>
</span

The relevant line in my javascript is

imageSize = document.getElementById("imageContainer").clientWidth;

If I output to console.log it returns 0

However, if I change the span to

<div id="imageContainer">

then it correctly returns the size of the image, however, I can't use a div as that extends beyond the size of the image once the viewport increases beyond the width of the image.

So the question is, why doesn't document.getElementById work on a span, and is there a way around it?

• javascript
• html

Share Improve this question Follow edited Feb 26, 2018 at 20:18 void 36.7k1010 gold badges6969 silver badges111111 bronze badges asked Feb 26, 2018 at 20:17 Steve PriceSteve Price 6001212 silver badges3030 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

.getElementById() does indeed work on a <span> element, the problem is that .clientWidth does not. This is because <span> is an inline element, and thus has no set width or height. <div> is a block-level element, so has a default width, which is why you can output it with JavaScript.

This can be seen in the following:

var span = document.getElementById('example');
console.log(span.innerHTML);
console.log(span.clientWidth);

var div = document.getElementById('example2');
console.log(div.innerHTML);
console.log(div.clientWidth);

<span id="example">Span</span>
<div id="example2">Div</div>

This is because span is an inline element and div is a block element.

And in the documentation of Element.clientWidth it is clearly mentioned that

The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

From https://developer.mozilla/en-US/docs/Web/API/Element/clientWidth:

The Element.clientWidth property is zero for elements with no CSS or inline layout boxes

Ues the offsetWidth property instead, which does work on inline elements:

var s = document.getElementById('imageContainer');

console.log(s.offsetWidth);

<span id="imageContainer">
  This is a test
</span>

Summary You are stating you are getting no results when you perform a getElementById

Issue You have already gathered you needed to change the element over from a SPAN tag to DIV, this is a mon mistake many make.

Its important to know a SPAN tag is intended to contain text only and used to primarily add styling to a section of a paragraph such as:

<p>
   Wele to stackoverflow, an <span>online munity</span> of developers
</p>

This will allow you to specifically format online munity using CSS or highlight the text etc

A Div element can contain more than just text and therefore will bring back additional results when queried

https://developer.mozilla/en-US/docs/Web/HTML/Element/span