javascript - 动态突出显示(更改背景)/网页中的内容

Question

有什么方法可以在选择特定文本的同时动态更改网页中文本的 background-color 。

例如:

html 页面中的示例文本显示。我想在使用鼠标指针进行选择时突出显示该页面中的特定文本。

我的基础工作:

为特定选定的文本添加类“CSS 样式”。但是如何动态地从网页中获取选定的文本。

Answer 1

您可以使用 CSS 选择器 ::selection 动态设置所选文本的样式。

#content::selection {
  background-color: plum;
  color: white;
}
#content::-moz-selection {
  background-color: plum;
  color: white;
}

<div id="content">Sample text display in the html page. I want to high light the particular text in that page, while selecting from mouse pointer.</div>