永久更改选定的文本背景颜色答案

【问题标题】：Permanently change selected text background color永久更改选定的文本背景颜色
【发布时间】：2022-02-11 08:01:18
【问题描述】：

当我选择 DIV 文本时，如何永久更改它的背景颜色？我想要实现的是这样的高亮效果：

任何人都可以指导我如何使用 javascript 完成此操作？

非常感谢您的帮助。

编辑：我需要我的文本保持突出显示并突出显示多个文本，而不会丢失以前的突出显示。

【问题讨论】：

在您的 CSS 文件中添加 ::selection {color: black; background: yellow;} - 以获得所需的结果。
谢谢，但我需要我的文本保持突出显示并突出显示多个文本，而不会丢失以前的突出显示
好吧，这是有道理的。但是请在发布之前将此信息添加到您的问题中？您发布了一半的要求 - 这对这里的任何人都没有帮助。

标签： javascript html css reactjs

【解决方案1】：

您需要在JavaScript中添加事件侦听器，当时选择文本时需要更改如下

的颜色

function logSelection(event) {
  // Get Selection
  sel = window.getSelection();
  if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
  }
  // Set design mode to on
  document.designMode = "on";
  if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
  }
  // Colorize text
  document.execCommand("ForeColor", false, "red");
  // Set design mode to off
  document.designMode = "off";
}

const input = document.querySelector('input');
input.addEventListener('select', logSelection);

【讨论】：

有没有办法用 p 标签或 div 代替输入？

【解决方案2】：

使用::selection选择器覆盖默认颜色：

::selection{
  background: #FFD24D;
}

&lt;p&gt;A team of horses will struggle to chase down a spoken word.&lt;/p&gt;

【讨论】：

谢谢，但我需要文本保持突出显示
我明白了，您应该包含该信息，以便人们可以更轻松地帮助您。