Question

我需要获取图像的当前宽度，所以我尝试了一些javascript。注意，我正在使用Zen Cart，所以添加类到img src不是一个选项，因为图像是使用代码输出的，例如

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

所以我将图像包裹在一个跨度中，使其宽度与图像的宽度相同。

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

我的javascript中的相关行是

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

如果输出到console.log，则返回0

但是，如果我将范围更改为

<div id="imageContainer">

然后它正确地返回图像的大小，但是，我不能使用div，因为一旦视口增加超出图像的宽度，它就会超出图像的大小。

所以问题是，document.getElementById为什么span无效，是否可以解决这个问题？

Answer 1

.getElementById() 确实适用于 <span> 元素，问题在于 .clientWidth 才不是。这是因为width是inline element，因此没有设置 width 或 height 。 <div> 是block-level element，因此默认为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);，这就是您可以使用JavaScript输出的原因。

这可以在以下内容中看到：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

这是因为span是内联元素，div是block元素。

在Element.clientWidth的文档中，明确提到了

对于没有CSS或的元素，Element.clientWidth属性为零内联布局框，否则它是元素的内部宽度像素。它包括填充但不包括垂直滚动条（如果呈现，如果呈现），边界或边缘。

Answer 3

来自https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth：

对于没有CSS或的元素，Element.clientWidth属性为零内联布局框

使用offsetWidth属性，对内联元素起作用：

var s = document.getElementById('imageContainer');

console.log(s.offsetWidth);

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

Answer 4

<强>摘要您在声明执行getElementById

时没有得到任何结果

<强>问题您已经收集了将SPAN标记中的元素更改为DIV所需的内容，这是许多人常犯的错误。

了解SPAN标记非常重要，它仅用于包含文本，主要用于将样式添加到段落的某个部分，例如：

<p>
   Welcome to stackoverflow, an <span>online community</span> of developers
</p>

这将允许您使用CSS专门格式化在线社区或突出显示文本等

Div元素可以包含的不仅仅是文本，因此在查询时会带回其他结果

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

在span id上使用getElementById时没有结果

4 个答案: