Question

如何确定自动调整大小的元素的宽度（未指定width）？

在示例中，我需要确定span元素的宽度。

以下不工作：

getElementsByTagName('span')[0].clientWidth;
getElementsByTagName('span')[0].getBoundingClientRect().width;
getElementsByTagName('span')[0].offsetWidth;

查看Chrome开发者控制台/计算选项卡时，图表显示“auto x auto”。

Chrome版本49.0.2623.87 m 错误？

没有框架。

原来在Chrome中，如果父元素设置为display: none，则所有属性都将返回0，这非常蹩脚。

Answer 1

正如评论中所提到的，您的getBoundingClientRect()代码段应该有用。

否则，请尝试offsetWidth而不是clientWidth。

有关offsetWidth和其他类似属性的详细信息，请参阅以下答案：https://stackoverflow.com/a/21064102/2773837

Answer 2

正如我在评论中所说：必须工作！

＆＃13;

var spanBCRw = document.getElementsByTagName('span')[0].getBoundingClientRect().width;

console.log( spanBCRw );   // 7.09375

＆＃13;

<span>a</span>

＆＃13;

很可能你忘了首先定位存储DOM的document

http://jsbin.com/nukufi/edit?html,css,js,console,output

var doc = document; // !!!!!!!!!!

console.log(
  doc.getElementsByTagName('span')[0].clientWidth, // 0 
  doc.getElementsByTagName('span')[0].getBoundingClientRect().width, // 7.09375
  doc.getElementsByTagName('span')[0].offsetWidth // 8
);

clientWidth仅在您将span设置为CSS时才有效：
display:inline-block;或display:block;

Chrome JavaScript自动调整大小的元素宽度返回0

2 个答案: