CSS custom highlight API

CSS custom highlight API trong hoạt động

Để bật tạo style cho các phạm vi văn bản trên trang web bằng CSS Custom Highlight API, bạn tạo một đối tượng Range, sau đó một đối tượng Highlight cho phạm vi đó. Sau khi đăng ký highlight bằng phương thức HighlightRegistry.set(), bạn có thể chọn phạm vi đó bằng pseudo-element ::highlight(). Tên được định nghĩa trong phương thức set() được sử dụng làm tham số của bộ chọn pseudo-element ::highlight() để chọn phạm vi đó. Phạm vi được chọn bởi pseudo-element ::highlight() có thể được tạo style bằng một số thuộc tính giới hạn.

<h1>Directions</h1>
<h2>Lincoln Memorial to Martin Luther King, Jr. Memorial</h2>
<ol><li>Head south on Lincoln Memorial Circle</li
  ><li>Turn right toward Independence Ave</li
  ><li>Turn left onto Independence Ave</li
  ><li>Turn right onto West Basin Dr</li
  ><li>Look up when you reach 64 Independence Ave!</li>
</ol>
<hr />
<label
  >Number of steps completed:
  <input type="number" min="0" max="5" value="0" id="currentStep" />
</label>

Ví dụ này sử dụng thuộc tính text-decoration để gạch ngang phạm vi highlight steps được định nghĩa bởi JavaScript của chúng ta:

::highlight(steps) {
  text-decoration: line-through;
  color: blue;
}

Chúng ta tạo một Range với node bắt đầu và kết thúc (là cùng một node trong trường hợp này). Sau đó chúng ta đặt phạm vi này là Highlight bằng phương thức set() của interface CSS HighlightRegistry.

const rangeToHighlight = new Range();
const list = document.querySelector("ol");
rangeToHighlight.setStart(list, 0);
rangeToHighlight.setEnd(list, 0);

CSS.highlights.set("steps", new Highlight(rangeToHighlight));

Một event listener cập nhật cuối của phạm vi được highlight khi số bước hoàn thành thay đổi:

const currentPositionSlider = document.querySelector("input");
currentPositionSlider.addEventListener("change", (e) => {
  rangeToHighlight.setEnd(list, e.target.value);
});

Tham chiếu

Pseudo-elements

• ::highlight()

Interfaces

• Highlight
• HighlightRegistry

Mở rộng interface

Module này thêm các thuộc tính và phương thức vào các interface được định nghĩa trong các đặc tả khác.

• CSS
  • CSS.highlights

Hướng dẫn

CSS custom highlight API

Các khái niệm và cách sử dụng CSS custom highlight API, bao gồm tạo các đối tượng Range và Highlight, đăng ký highlight bằng HighlightRegistry, và tạo style cho highlight bằng pseudo-element ::highlight().

Các khái niệm liên quan

• ::grammar-error
• ::selection
• ::spelling-error
• ::target-text
• Interface Range và constructor Range()
• Text fragments
• Interface FragmentDirective

Đặc tả

Xem thêm

• CSS pseudo-element module
• CSS Object Model (CSSOM) APIs