javascript - Span 的 "ScrollWidth"属性在 Chrome 上不起作用吗？

Question

我有一个跨度，里面有一些文本。

document.getElementById('span1').scrollWidth;

在 Firefox 上返回“100”作为滚动宽度，但 Chrome 仅返回“0”。 Chrome 不支持这个 'scrollWidth' 属性吗？还有其他不支持相同功能的浏览器吗？

如果我需要获取句子的长度(以像素为单位)，该怎么解决这个问题？(我不断使用“innerHTML”属性用句子填充“span1”)

Answer 1

Firefox 和 Chrome 对 css 和 js 的响应方式有很多不同。 [ff=Firefox、c=Chrome、sw= 滚动宽度]

要点:

1. sw 仅当元素的 display 不是 inline 且 none 时才起作用。
   ff 默认将 display 设置为 block，而 c 将其设置为 inline。 所以你不会在c中得到sw。如果您需要隐藏该元素，只需使用:
   visibility:hidden 无需为 ff 和 c 设置 display。
2. 如果您在c中设置了visibility，请使用元素的style.width而不是sc。这有效。

如果您仍然想在 chrome 上使用 sc 来隐藏 span，您可以使用 @AnthonyWJones 的回答

Knowing how wide a text line will be in HTML for word wrap and other applications

适用于 IE7、8、9、FF、Chrome。