时间戳

首页 > 解决方案 > 有没有办法使用 JavaScript 更改 ::selection （选定文本）的背景颜色？

javascript - 有没有办法使用 JavaScript 更改 ::selection （选定文本）的背景颜色？

问题描述

我想使用 HTML 按钮更改文本选择的背景。有没有办法::selection使用 JavaScript 更改（选定文本）的背景颜色？

标签： javascripthtmlcss

解决方案

通常，在无法通过 JS 直接更改伪元素设置的情况下，可以使用 JS 设置 CSS 变量。

因此，如果您的样式表中有这样的内容：

::selection {
  background-color: var(--selcolor);
}

在你的 JS 中是这样的：

   element.style.setProperty('--selcolor', selcolor)

它会起作用的。

这是一个小例子。它改变了 body 中的选择颜色变量：

function selChange(color) {
  document.body.style.setProperty('--selcolor', color);
}
body {
  --selcolor: yellow;
}

::selection {
  background-color: var(--selcolor);
}
<button onclick="selChange('cyan');">Cyan</button>
<button onclick="selChange('magenta');">Magenta</button>
<button onclick="selChange('yellow');">Yellow</button>
<p>Highlight some of this text, then click a color and highlight some text...</p>

推荐阅读