HTMLElement:innerText 属性
HTMLElement
接口的 innerText
属性表示一个节点及其后代所渲染文本的内容。
作为一个 getter,它近似于用户用光标突出该元素的内容,然后将其复制到剪贴板上所得到的文本。作为一个 setter,这将用给定的值替换该元素的子元素,并将任何换行符转换为 <br>
元素。
备注: innerText
很容易与 Node.textContent
混淆,但这两个属性间实际上有很重要的区别。大体来说,innerText
知道文本的渲染外观,而 textContent
不知道。
输出
一个字符串,代表元素的渲染文本内容。
如果元素本身没有被渲染(例如,从文档中分离出来或从视图中隐藏起来),返回值与 Node.textContent
属性相同。
警告:在一个节点上设置 innerText
会移除该节点的所有子节点,并用给定的字符串值的单一文本节点代替它们。
示例
这个示例对比了 innerText
和 Node.textContent
。请注意 innerText
是如何意识到像 <br>
这样的元素,并忽略了隐藏的元素的。
HTML
html
<h3>源元素:</h3>
<p id="source">
<style>
#source {
color: red;
}
#text {
text-transform: uppercase;
}
</style>
<span id="text">
来看看<br />
这段文字<br />
在下方怎么表示。
</span>
<span style="display:none">隐藏文字</span>
</p>
<h3>textContent 结果:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>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;
结果
规范
Specification |
---|
HTML Standard # the-innertext-idl-attribute |
浏览器兼容性
BCD tables only load in the browser