检索隐藏元素的innerText答案

【问题标题】：Retrieve innerText of hidden element检索隐藏元素的innerText
【发布时间】：2017-09-30 02:36:04
【问题描述】：

我正在尝试获取元素的 innerText，但 Chrome 返回一个空字符串，因为我的元素被隐藏了。

Firefox 没有。

即使元素不可见，有没有办法在 Chrome 中检索 innerText？

console.log(document.querySelector('div').innerText + ':' + document.querySelector('div').innerHTML);

div {
  height: 0;
  overflow: hidden;
}

<div>
Hello, I'm <strong>empty!</strong>
</div>

老实说，我真的很惊讶 Chrome 的这种行为，这是一个错误吗？

https://jsfiddle.net/r8q2znc4/

【问题讨论】：

标签： javascript innertext

【解决方案1】：

您想为此使用textContent，因为它会从隐藏元素返回文本

document.querySelector('div').textContent

documentation 声明

TextContent 不同于 innerText ...

Internet Explorer 引入了node.innerText。
意图相似但有以下区别：

而textContent获取所有元素的内容，包括<script> 和<style> 元素，innerText 没有。

innerText 了解风格并且不会返回隐藏元素的文本，而textContent 会。

innerText 知道 CSS 样式，它会触发重排，而textContent 不会。

这不是 Chrome 错误，而是 Firefox 错误，innerText 不应该返回隐藏元素的内容。

【讨论】：

谢谢 :) 将尽快接受。但是您知道 为什么 Chrome 会为 innerText 的隐藏元素返回一个空字符串吗？只是出于好奇。编辑：看到你编辑，再次感谢：D
请注意，文本textContent 也会返回包含在<script> 标签之间的文本
知道为什么 .innerText 可以在我的 jsfiddle 上工作吗？ jsfiddle.net/JaredHess/0jm4tq5p/32 在我的 HTML 选项卡中，我有三个隐藏的 p 标签（使用 style="display:none"）。我在 Firefox 和 Chrome 中都对此进行了测试，并且 .innerText 在我的 jsfildde 控制台中返回与 .textContent 相同的文本。我通常使用Firefox，所以当我遇到这个时，我想可能是你提到的Firefox错误，但现在我不确定发生了什么。

【解决方案2】：

innerText 在所有浏览器上都是not well supported。

以下是支持innerText的浏览器。

Screenshoted here

【讨论】：

考虑到您的屏幕截图完全是绿色的，对我来说似乎得到了很好的支持：P