为什么 textContent 不能触发回流

Question

为什么 textContent 不能触发回流

cssinnertextreflow

5

我正在MDN上了解textContent和innerText之间的区别。它向我展示了一些让我感到困惑的内容。

1. innerText会注意样式，不会返回隐藏元素的文本，而textContent则会。（没问题，完全理解）

2. 由于innerText注意CSS样式，它将触发重排，而textContent不会。（为什么？）

- D.jennis

@Nit 也许这样问有点愚蠢。看来我还没有完全理解回流。我找到了一篇关于它的文章： https://developers.google.com/speed/articles/reflow 现在我明白了。不管怎样，谢谢你的建议！ - D.jennis

现在我完全明白了！由于innerText只获取可见文本，因此它应该首先触发回流（刷新排队的回流列表）并重新计算元素的样式。然后才能得到正确的结果。 - D.jennis

而textContent不需要这样做。 - D.jennis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- D.jennis · Accepted Answer

有人建议我回答这个问题，而不是留下评论。虽然在那之后我做了更多的研究。现在让我们再次看一下差异。

innerText会考虑样式并且不会返回隐藏元素的文本

引用自MDN。

这意味着，innerText只从可见元素获取文本（不包括display: none或visibility: hidden）。此外，应用于元素的CSS样式比如text-transform: uppercase也会被考虑在内。因此，innerText将返回文本的大写版本，而textContent将返回未更改的版本。您可以在jsfiddle上尝试此演示。

由于innerText需要知道元素的最新样式，因此它应该首先触发回流（清除排队的回流列表）并重新计算元素的样式。然后获得期望的结果。

而textContent则不需要这样做，因为它不考虑样式。

如果您对innerText和textContent之间的差异更多细节感兴趣，可以阅读这篇文章。