DPD
DPD copied to clipboard
gjbex
<body> class"" pace-done light
OPEN MAIN MENU
Web API 接口参考 CSS 自定义高亮 API
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Filter sidebar Filter In this article 概念与用法 接口 示例 规范 浏览器兼容性 参见 CSS Custom Highlight API 接口 Highlight HighlightRegistry 属性 CSS.highlights CSS 自定义高亮 API CSS 自定义高亮 API 提供了一种方法，可以通过使用 JavaScript 创建范围并使用 CSS 定义样式来设置文档中任意文本范围的样式。
概念与用法 在网页上设置文本范围样式非常有用。例如，文本编辑类的 Web 应用程序会突出显示拼写或语法错误，代码编辑器会突出显示语法错误。
CSS 自定义高亮 API 通过提供一种创建任意 Range 对象并设置其样式的方法（而不是局限于浏览器定义的范围），扩展了其他高亮伪元素的概念，例如 ::selection、::spelling-error、::grammar-error 和 ::target-text。
使用 CSS 自定义高亮 API，你可以通过编程方式创建文本范围并高亮显示它们，而不会影响页面中的 DOM 结构。
使用 CSS 自定义高亮 API 设置网页上文本范围的样式有四个步骤：
创建 Range 对象。 为这些范围创建 Highlight 对象。 使用 HighlightRegistry 进行注册。 使用 ::highlight() 伪元素定义高亮样式。 创建范围 第一步是使用 JavaScript 创建 Range 对象，标明你想设置样式的文本范围。例如：
JS Copy to Clipboard const parentNode = document.getElementById("foo");
const range1 = new Range(); range1.setStart(parentNode, 10); range1.setEnd(parentNode, 20);
const range2 = new Range(); range2.setStart(parentNode, 40); range2.setEnd(parentNode, 60); 创建高亮 第二步是为你的文本范围实例化 Highlight 对象
多个范围可以关联到一个高亮显示。如果你希望以相同的方式高亮显示多个文本片段，只需要创建一个高亮并使用相应的范围初始化它。
JS Copy to Clipboard const highlight = new Highlight(range1, range2); 但你也可以根据需要创建任意多的高亮。例如，如果你正在构建一个协作文本编辑器，其中每个用户获得不同的文本颜色，那么你可以为每个用户创建一个高亮显示，如下所示：
JS Copy to Clipboard const user1Highlight = new Highlight(user1Range1, user1Range2); const user2Highlight = new Highlight(user2Range1, user2Range2, user2Range3); 每个高亮可以设置不同的样式。
注册高亮 创建高亮显示后，使用 HighlightRegistry 将其注册为 CSS.highlights (e
