简体繁体 English

在DOM中报告的怪异宽度（当元素具有宽度时为0）

[英]Weird width reported in DOM (0, when element has width)

原文 2011-09-02 15:13:53 0 1 javascript/ css/ dom

I think the image explains what's going on pretty well. 我认为图像可以很好地说明正在发生的事情。 I know this happens with images that haven't loaded yet.. and the width of this element is changing, but the functions I need the width with are being called and extracting the width afterwards, and usually Web Inspector updates itself, so... what could be happening here? 我知道这会在尚未加载的图像中发生..并且此元素的宽度正在更改，但是我需要宽度的函数被调用并随后提取宽度，通常Web Inspector会自行更新。在这里会发生什么？ (I'm trying to apply the width of one element to another, and because of the 0 reported width the second element is invisible. It's only doing this on some of the elements, though. （我正在尝试将一个元素的宽度应用于另一个元素，由于报告的宽度为0，因此第二个元素是不可见的。尽管如此，它仅在某些元素上执行此操作。

These are inline elements, so perhaps that's the reason? 这些是内联元素，也许这就是原因吗？ But clearly someone is generating a width somewhere, and it is working with other inline elements with the same js but different css. 但是显然有人在某处生成宽度，并且它正在与其他具有相同js但不同css的内联元素一起使用。

在此处输入图片说明

1 个解决方案

Elements with "display: inline" such as <span> 's or <a> 's do not use or have a width style property. 带有<display <span> inline <span>的元素（例如<span>或<a> ）不使用或具有width样式属性。 If you set the element to "display: inline-block" it will use a width style property. 如果将元素设置为“ display：inline-block”，它将使用width样式属性。

element.offsetWidth will give you a proper width, but the "computed style" of a inline element will always be 0. Inline elements have an automatic width, so the style applied has no effect. element.offsetWidth将为您提供适当的宽度，但内联元素的“计算样式”将始终为0。内联元素具有自动宽度，因此应用的样式无效。