Highlight

Hàm khởi tạo

Highlight()

Trả về một đối tượng Highlight mới được tạo.

Thuộc tính phiên bản

Giao diện Highlight không kế thừa bất kỳ thuộc tính nào.

Highlight.priority

Một số cho biết độ ưu tiên của đối tượng Highlight này. Khi nhiều vùng làm nổi bật chồng lên nhau, trình duyệt sử dụng độ ưu tiên này để quyết định cách tạo kiểu cho các phần chồng lên nhau.

Highlight.size Read only

Trả về số lượng phạm vi trong đối tượng Highlight.

Highlight.type

Một String liệt kê được dùng để chỉ định ý nghĩa ngữ nghĩa của vùng làm nổi bật. Điều này cho phép các công nghệ hỗ trợ bao gồm ý nghĩa này khi hiển thị vùng làm nổi bật cho người dùng.

Phương thức phiên bản

Giao diện Highlight không kế thừa bất kỳ phương thức nào.

Highlight.add()

Thêm một phạm vi mới vào vùng làm nổi bật này.

Highlight.clear()

Xóa tất cả các phạm vi khỏi vùng làm nổi bật này.

Highlight.delete()

Xóa một phạm vi khỏi vùng làm nổi bật này.

Highlight.entries()

Trả về một đối tượng iterator mới chứa mỗi phạm vi trong đối tượng làm nổi bật, theo thứ tự chèn vào.

Highlight.forEach()

Gọi callback đã cho một lần cho mỗi phạm vi trong đối tượng làm nổi bật, theo thứ tự chèn vào.

Highlight.has()

Trả về một giá trị boolean xác nhận liệu một phạm vi có tồn tại trong đối tượng làm nổi bật hay không.

Highlight.keys()

Bí danh cho Highlight.values().

Highlight.values()

Trả về một đối tượng iterator mới tạo ra các phạm vi trong đối tượng làm nổi bật theo thứ tự chèn vào.

Ví dụ

Ví dụ sau đây minh họa cách làm nổi bật các phần cụ thể của một khối văn bản.

<p class="foo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  sapiente non eum facere? Nam rem hic culpa, ipsa rerum ab itaque consectetur
  molestiae dolores vitae! Quo ex explicabo tempore? Tenetur.</p>

Đoạn mã JavaScript này tạo các phạm vi, khởi tạo một đối tượng Highlight mới cho chúng, và đăng ký nó để tạo kiểu trên trang:

const parentNode = document.querySelector(".foo");
const textNode = parentNode.firstChild;

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(textNode, 6);
range1.setEnd(textNode, 21);

const range2 = new Range();
range2.setStart(textNode, 57);
range2.setEnd(textNode, 71);

// Create a custom highlight for these ranges.
const highlight = new Highlight(range1, range2);

// Register the ranges in the HighlightRegistry.
CSS.highlights.set("my-custom-highlight", highlight);

Đoạn mã CSS sau minh họa cách tạo kiểu cho vùng làm nổi bật tùy chỉnh đã đăng ký bằng cách sử dụng phần tử giả ::highlight:

::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• The CSS Custom Highlight API
• CSS custom highlight API module
• CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web