CSS Custom Highlight API All In One

CSS 自定义高亮 API

MDN

const parentNode = document.getElementById("foo");

// step 1: 创建 range object
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

// step 2: 创建 highlight object
const highlight = new Highlight(range1, range2);

// step 3:  注册 highlight object
CSS.highlights.set("user-1-highlight", highlight);

/* step 4: 使用 ::highlight 为元素 ，高亮 highlight object  */
::highlight(user-1-highlight) {
  background-color: yellow;
  color: black;
}

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

https://developer.mozilla.org/en-US/docs/Web/API/Highlight

https://developer.mozilla.org/en-US/docs/Web/API/CSS/highlights_static

demos

::highlight(search-results) {
          background-color: #ff0066;
          color: white;
}

https://codepen.io/xgqfrms/pen/yyajErb

refs

https://x.com/KaraBharat/status/2039362336792986075?s=20

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！