如何使用JavaScript配合HTML按钮修改::selection选中文本的背景颜色？

架构老林

2026-10-5

解答

可以实现，但你无法直接通过JavaScript操作DOM元素的style属性修改::selection伪类的样式，因为伪类不属于实际DOM节点的可直接修改属性范畴，你可以通过动态修改页面样式规则的方式实现点击按钮切换选中文本背景色的需求。

方法1：切换根元素类名（更推荐，性能更好）

提前在CSS中定义多套::selection样式规则，点击按钮时切换根元素的类名即可生效：

/* 默认选中样式 */
::selection {
  background: #add8e6;
  color: #000;
}
/* 红色选中样式 */
.root-red::selection {
  background: #ffb3b3;
  color: #000;
}
/* 绿色选中样式 */
.root-green::selection {
  background: #b3ffb3;
  color: #000;
}

HTML按钮示例：

<button id="toRed">切换红色选中背景</button>
<button id="toGreen">切换绿色选中背景</button>

对应JS逻辑：

document.getElementById('toRed').addEventListener('click', function() {
  document.documentElement.className = 'root-red';
});

document.getElementById('toGreen').addEventListener('click', function() {
  document.documentElement.className = 'root-green';
});

方法2：动态插入style标签（适合需要灵活自定义颜色的场景）

如果需要动态设置任意颜色，可通过点击按钮时动态创建style标签插入页面实现：

document.getElementById('randomSelectBg').addEventListener('click', function() {
  // 先移除之前插入的自定义selection样式，避免重复堆积
  const existStyle = document.getElementById('custom-selection-style');
  if(existStyle) existStyle.remove();
  
  // 创建新的样式标签
  const styleEl = document.createElement('style');
  styleEl.id = 'custom-selection-style';
  // 示例为生成随机背景色，可替换为你指定的任意颜色值
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  styleEl.textContent = `::selection { background: ${randomColor}; }`;
  document.head.appendChild(styleEl);
});