为什么textContent不会触发重排 [英] why would textContent not trigger a reflow

问题描述

我正在查看MDN上的textContent和innerText之间的区别，这表明我有些困惑.

I was looking at the difference between textContent and innerText on MDN.And it shows me something that confused me a lot.

1.innerText知道样式，不会返回隐藏元素的文本，而textContent会. (没问题，完全理解)

1.innerText is aware of style and will not return the text of hidden elements, whereas textContent will. (no problem, totally understand)

2.innerText知道CSS样式，它将触发重排，而textContent不会. (为什么?)

2.As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not. (why?)

推荐答案

有人建议我回答这个问题，而不要留下评论.尽管在那之后我做了很多研究.现在，让我们再次看看它们之间的差异.

I was suggested to answer this question instead of leaving comments. Though I did a lot more research after that. Now let's take a look at the differences again.

innerText知道样式，不会返回隐藏的文本 元素

innerText is aware of style and will not return the text of hidden elements

引用自 MDN .

这意味着，innerText仅从可见元素中获取文本(不是display: none，也不是visibility: hidden).此外，还将考虑应用于诸如text-transform: uppercase之类的元素的css样式.结果，innerText将返回文本的大写版本，而textContent将返回未更改的版本.您可以在jsfiddle上尝试以下演示.

It means, innerText only get text from visible elements(not display: none, nor visibility: hidden). In addition, css styles applied on elements like text-transform: uppercase will also be taken into account. As a result, innerText will return the uppercased version of text while textContent will return the unchanged version. You can have a try of this demo on jsfiddle.

由于innerText需要知道元素的最新样式，因此应首先触发重排(刷新排队的重排列表)并重新计算元素的样式，然后得到预期的结果.

Since innerText needs to know what the most-recent style the element is, it should trigger reflow first (flush the queued reflow list) and re-calculating the style of the element.Then get the expected result.

而textContent不必这样做，因为它不了解样式.

Whereas textContent have not to do it since it's not aware of style.

如果您对innerText和textContent之间的区别的更多详细信息感兴趣，可以阅读

If you are interested in more details of differences between innerText and textContent, you can have a read of this article.

这篇关于为什么textContent不会触发重排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！