freeCodeCamp.org
·
如何使用CSS自定义高亮API程序性地高亮文本
💡
原文英文，约1900词，阅读约需7分钟。
📝
内容提要
本文介绍了在浏览器中通过<mark>元素和CSS自定义高亮API高亮文本的方法。<mark>元素简单，但在多个HTML元素间高亮时不便。CSS自定义高亮API允许跨多个元素高亮，且无需修改DOM，提供了更灵活的高亮方式。
🎯
关键要点
- 在浏览器中可以通过点击和拖动文本来高亮显示文本。
- 使用<mark>元素可以高亮文本，但在多个HTML元素间高亮时不便。
- CSS自定义高亮API允许跨多个元素高亮，且无需修改DOM，提供了更灵活的高亮方式。
- 高亮文本的原因包括突出搜索结果、强调重要信息和用户自定义高亮。
- 使用<mark>元素时，需要修改DOM，可能导致性能问题。
- CSS自定义高亮API通过创建高亮区域并使用CSS样式来解决<mark>元素的局限性。
- 高亮区域与范围对象相关联，范围可以跨多个HTML元素。
- 使用CSS.highlights.set方法注册高亮对象，并通过::highlight伪元素定义高亮样式。
- 可以动态修改高亮范围，添加或删除高亮。
- CSS自定义高亮API在Chrome、Edge和Safari中得到支持，Firefox的支持正在增加。
- CSS自定义高亮API允许在不修改DOM的情况下动态添加、修改和删除高亮。
➡️
