HTMLElement.innerText
innerText
属性表示一个节点及其后代的“渲染”文本内容。As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
备注: innerText
很容易与Node.textContent
混淆,但这两个属性间实际上有很重要的区别。大体来说,innerText
可操作已被渲染的内容,而 textContent
则不会。
语法
var renderedText = HTMLElement.innerText; HTMLElement.innerText = string;
输出值
一段 DOMString
表示一个元素中已被渲染的内容。如果元素自身没有 被渲染 (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 Node.textContent
属性相同。
示例
这个示例对比了 innerText
和 Node.textContent
. 这时 innerText
代表的含义就像 <br>
标签,并且忽略了隐藏的元素。
HTML
<h3>Source element:</h3>
<p id="source">
<style>#source { color: red; }</style>
Take a look at<br>how this text<br>is interpreted
below.
<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
const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');
textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;
结果
规范
Specification |
---|
HTML Standard # the-innertext-idl-attribute |
浏览器兼容
BCD tables only load in the browser
此特性最初由 Internet Explorer 引入。被所有主要的浏览器供应商(vendor)采用后,它于 2016 年正式进入 HTML 标准。