HTMLElement: thuộc tính innerText
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
Thuộc tính innerText của giao diện HTMLElement biểu thị nội dung văn bản được hiển thị của một nút và các con của nó.
Khi dùng làm getter, nó ước tính văn bản mà người dùng nhận được nếu họ bôi đen nội dung phần tử bằng con trỏ rồi sao chép vào clipboard.
Khi dùng làm setter, nó sẽ thay thế các con của phần tử bằng giá trị đã cho, chuyển đổi bất kỳ xuống dòng nào thành các phần tử <br>.
Note:
innerText dễ bị nhầm lẫn với Node.textContent, nhưng có những khác biệt quan trọng giữa hai thuộc tính.
Về cơ bản, innerText nhận biết giao diện được hiển thị của văn bản, trong khi textContent thì không.
Giá trị
Một chuỗi đại diện cho nội dung văn bản được hiển thị của phần tử.
Nếu bản thân phần tử không đang được hiển thị (ví dụ: đã bị tách khỏi tài liệu hoặc bị ẩn khỏi tầm nhìn), giá trị trả về giống như thuộc tính Node.textContent.
Warning:
Đặt innerText trên một nút sẽ xóa tất cả các con của nút và thay thế chúng bằng một nút văn bản duy nhất với giá trị chuỗi đã cho.
Ví dụ
Ví dụ này so sánh innerText với Node.textContent.
Lưu ý cách innerText nhận biết các phần tử như <br> và bỏ qua các phần tử ẩn.
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="18" cols="40" readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="40" readonly>…</textarea>
JavaScript
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");
textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # the-innertext-idl-attribute |