HTMLElement: innerText 属性
HTMLElement 接口的 innerText 属性表示一个节点及其后代的可渲染文本内容。
作为 getter 时，它近似地返回用户通过鼠标选中元素内容并复制到剪贴板后获得文本。作为 setter 时，它将用给定的值替换元素的所有子节点，并将任何换行符转换为 <br> 元素。
注意: innerText 很容易与 Node.textContent 混淆，但两者之间存在重要区别。基本上，innerText 考虑文本的可渲染外观，而 textContent 则不考虑。
值
一个表示元素可渲染文本内容的字符串。
如果元素本身未被 渲染（例如，已从文档中分离或对用户不可见），则返回值与 Node.textContent 属性相同。
警告: 在节点上设置 innerText 会删除该节点所有的子节点，并用一个具有给定字符串值的文本节点替换它们。
示例
此示例将 innerText 与 Node.textContent 进行比较。请注意 innerText 如何考虑 <br> 元素等内容，并忽略隐藏的元素。
HTML
html
<h3>Source element:</h3>
<p id="source">
<style>
#source {
color: red;
}
#text {
text-transform: uppercase;
}
</style>
<span id="text">
Take a look at<br />
how this text<br />
is interpreted below.
</span>
<span style="display:none">HIDDEN TEXT</span>
</p>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>
JavaScript
js
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");
textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
结果
规范
| 规范 |
|---|
| HTML # the-innertext-idl-attribute |
浏览器兼容性
加载中…