如何通过单选/下拉切换，用同一组颜色选择器控制多类颜色属性？

嘿，这个扩展需求很实用！作为JS新手，咱们一步步来实现，保证每一步都清晰好懂～

核心思路 #

咱们要做的就是：给现有颜色选择器加一个目标属性切换控件（单选按钮最直观），然后修改JS逻辑，让颜色选择器根据当前选中的目标，去修改对应的CSS属性，同时还要把不同目标的颜色设置分别存在localStorage里，刷新页面后能恢复之前的设置。

第一步：更新HTML，添加切换控件并修正原有代码 #

首先，先把你原来HTML里重复的class属性合并（同一个元素不能写两次class），然后加上单选按钮组来切换目标属性：

<!-- 目标属性切换区 -->
<div style="margin-bottom: 12px;">
  <label>
    <input type="radio" name="targetProperty" value="backgroundColor" checked>
    页面背景色
  </label>
  &nbsp;&nbsp;
  <label>
    <input type="radio" name="targetProperty" value="color">
    文本前景色
  </label>
  &nbsp;&nbsp;
  <label>
    <input type="radio" name="targetProperty" value="borderColor">
    页面边框色（示例）
  </label>
</div>

<!-- 修正后的颜色选择器 -->
<input id="cyan" class="colorPicker grabbable" style="vertical-align: middle;" type="range" min="0" max="255" step="1" value="255">
<input id="magenta" class="colorPicker grabbable" style="vertical-align: middle;" type="range" min="0" max="255" step="1" value="255">
<input id="yellow" class="colorPicker grabbable" style="vertical-align: middle;" type="range" min="0" max="255" step="1" value="255">

第二步：修改JavaScript逻辑，支持切换与持久化 #

下面的代码我加了详细注释，每一步都解释清楚，方便你理解：

// 1. 获取页面元素
const colorPickers = document.getElementsByClassName("colorPicker");
const targetRadios = document.querySelectorAll('input[name="targetProperty"]');
// 默认选中的目标属性（和HTML里的checked保持一致）
let currentTarget = "backgroundColor";

// 2. 页面加载时，恢复之前保存的设置
function loadSavedSettings() {
  // 恢复选中的目标属性
  const savedTarget = localStorage.getItem("currentTarget");
  if (savedTarget) {
    currentTarget = savedTarget;
    // 找到对应的单选按钮并标记为选中
    const matchedRadio = document.querySelector(`input[name="targetProperty"][value="${savedTarget}"]`);
    if (matchedRadio) matchedRadio.checked = true;
  }

  // 恢复当前目标的颜色值（如果没保存过，用默认值255）
  const cyan = localStorage.getItem(`cyan-${currentTarget}`) || "255";
  const magenta = localStorage.getItem(`magenta-${currentTarget}`) || "255";
  const yellow = localStorage.getItem(`yellow-${currentTarget}`) || "255";

  // 更新颜色选择器的显示值
  document.getElementById("cyan").value = cyan;
  document.getElementById("magenta").value = magenta;
  document.getElementById("yellow").value = yellow;

  // 把颜色应用到当前目标
  applyColor(cyan, magenta, yellow);
}

// 3. 将颜色应用到当前选中的目标属性
function applyColor(cyan, magenta, yellow) {
  const rgbColor = `rgb(${cyan}, ${magenta}, ${yellow})`;
  // 动态修改body的对应样式（currentTarget是变量，能切换不同属性）
  document.body.style[currentTarget] = rgbColor;
}

// 4. 监听颜色选择器的输入事件
for (let i = 0; i < colorPickers.length; i++) {
  colorPickers[i].addEventListener("input", function() {
    const cyan = document.getElementById("cyan").value;
    const magenta = document.getElementById("magenta").value;
    const yellow = document.getElementById("yellow").value;

    // 应用颜色到当前目标
    applyColor(cyan, magenta, yellow);

    // 保存当前目标的颜色值到localStorage（用目标属性区分键名，避免覆盖）
    localStorage.setItem(`cyan-${currentTarget}`, cyan);
    localStorage.setItem(`magenta-${currentTarget}`, yellow);
    localStorage.setItem(`yellow-${currentTarget}`, yellow);
  });
}

// 5. 监听目标属性切换事件
targetRadios.forEach(radio => {
  radio.addEventListener("change", function() {
    // 更新当前目标属性
    currentTarget = this.value;
    // 保存当前选中的目标
    localStorage.setItem("currentTarget", currentTarget);
    // 加载这个目标对应的保存颜色
    loadSavedSettings();
  });
});

// 6. 页面加载完成后，自动恢复设置
window.addEventListener("load", loadSavedSettings);

给新手的关键提示 #

• localStorage键名区分：用cyan-${currentTarget}这种命名方式，能让不同目标的颜色设置互不干扰，比如背景色的 cyan 存在cyan-backgroundColor，文本色的 cyan 存在cyan-color
• 动态修改CSS属性：document.body.style[currentTarget]里的currentTarget是变量，这样就能根据选中的单选按钮，灵活切换修改的样式属性
• 页面加载时机：用window.addEventListener("load", ...)确保页面所有元素都加载完成后再执行恢复逻辑，避免出现“找不到元素”的错误

内容的提问来源于stack exchange，提问作者Kent