5

我在 MDN 上查看 textContent 和 innerText 之间的区别。它向我展示了一些让我很困惑的东西。

1.innerText知道样式,不会返回隐藏元素的文本,而textContent会。(没问题,完全明白)

2.由于innerText知道CSS样式,它会触发重排,而textContent不会。(为什么?)

4

1 回答 1

2

有人建议我回答这个问题而不是发表评论。虽然在那之后我做了更多的研究。现在让我们再次看看它们的区别。

innerText 感知样式,不会返回隐藏元素的文本

引用自MDN

这意味着,innerText 仅从可见元素(不是display: none,也不是visibility: hidden)中获取文本。此外,应用于元素的 css 样式text-transform: uppercase也将被考虑在内。因此,innerText 将返回文本的大写版本,而 textContent 将返回未更改的版本。你可以在 jsfiddle 上试试这个演示。

由于innerText需要知道元素最近的样式是什么,所以应该先触发reflow(刷新排队的reflow列表)并重新计算元素的样式。然后得到预期的结果。

而 textContent 不必这样做,因为它不知道样式。

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

于 2017-08-29T07:04:36.780 回答