HighlightRegistry

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

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

HighlightRegistry.size Read only

Trả về số lượng đối tượng Highlight hiện đang được đăng ký.

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

Giao diện HighlightRegistry không kế thừa phương thức nào.

HighlightRegistry.clear()

Xóa tất cả đối tượng Highlight khỏi sổ đăng ký.

HighlightRegistry.delete()

Xóa đối tượng Highlight có tên chỉ định khỏi sổ đăng ký.

HighlightRegistry.entries()

Trả về một đối tượng iterator mới chứa từng đối tượng Highlight trong sổ đăng ký, theo thứ tự chèn.

HighlightRegistry.forEach()

Gọi hàm callback đã cho một lần cho mỗi đối tượng Highlight trong sổ đăng ký, theo thứ tự chèn.

HighlightRegistry.get()

Lấy đối tượng Highlight có tên chỉ định từ sổ đăng ký.

HighlightRegistry.has()

Trả về giá trị boolean cho biết liệu một đối tượng Highlight có tồn tại trong sổ đăng ký hay không.

HighlightRegistry.highlightsFromPoint() Experimental

Trả về một mảng các đối tượng đại diện cho các highlight tùy chỉnh được áp dụng tại một điểm cụ thể trong viewport.

HighlightRegistry.keys()

Bí danh của HighlightRegistry.values().

HighlightRegistry.set()

Thêm đối tượng Highlight đã cho vào sổ đăng ký với tên chỉ định, hoặc cập nhật đối tượng Highlight có tên đó nếu nó đã tồn tại trong sổ đăng ký.

HighlightRegistry.values()

Trả về một đối tượng iterator mới trả về các đối tượng Highlight trong sổ đăng ký, theo thứ tự chèn.

Ví dụ

Đăng ký một highlight

Ví dụ sau minh họa cách tạo các range, khởi tạo một đối tượng Highlight mới cho chúng, và đăng ký highlight bằng HighlightRegistry để áp dụng kiểu dáng trên trang:

HTML

<p id="foo">CSS Custom Highlight API</p>

CSS

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

JavaScript

const text = document.getElementById("foo").firstChild;

if (!CSS.highlights) {
  text.textContent =
    "The CSS Custom Highlight API is not supported in this browser!";
}

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(text, 0);
range1.setEnd(text, 3);

const range2 = new Range();
range2.setStart(text, 21);
range2.setEnd(text, 24);

// 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);

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