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.
Note: 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;
结果
规范
规范 | 状态 | 备注 |
---|---|---|
HTML Living Standard innerText |
Living Standard | Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history. |
浏览器兼容
BCD tables only load in the browser
此特性最初由 Internet Explorer 引入。 被所有主要的浏览器供应商(vendor)采用后,它于 2016 年正式进入 HTML 标准。