1. 面向开发者的 Web 技术
  2. Web API
  3. HTMLElement
  4. HTMLElement：innerText 属性

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

HTMLElement：innerText 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年3月⁩.

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
# the-innertext-idl-attribute

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content