如何修改CSS类样式值而非增减类？实现按钮触发随机背景色

你提的需求完全能实现——不用给元素加/删类，直接修改某个CSS类对应的样式属性值。不过得先明确一点：咱们没法直接修改服务器或本地的CSS文件（浏览器的安全策略限制了这种操作），但可以通过操作浏览器的CSSOM（CSS对象模型），动态修改当前页面已加载的CSS规则，效果和直接改CSS文件是一样的（只在当前页面生效）。

先给你修正下颜色生成的小问题：你的content数组里多了个"g"，十六进制颜色码只用到0-9和a-f，得把它删掉，不然生成的颜色可能无效。

下面给你两种实用的实现方案：

方案1：直接修改已有CSS规则 #

如果你页面里已经有对应的CSS类（比如.my-target-class），可以通过document.styleSheets找到这个类的规则，然后修改它的backgroundColor属性：

// 先修正颜色生成函数
function getRandomHexColor() {
  const content = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
  let color = "#";
  for(let i=0; i<6; i++) {
    color += content[Math.floor(Math.random()*content.length)];
  }
  return color;
}

// 修改指定CSS类的background-color
function changeClassBackgroundColor(className) {
  // 遍历页面所有样式表
  for(let sheet of document.styleSheets) {
    // 遍历当前样式表的所有规则
    try { // 跨域样式表会抛出错误，用try-catch跳过
      for(let rule of sheet.cssRules) {
        // 找到目标类的规则
        if(rule.selectorText === className) {
          rule.style.backgroundColor = getRandomHexColor();
          return; // 找到后直接退出，不用继续遍历
        }
      }
    } catch(e) {}
  }
}

// 给按钮绑定点击事件
document.querySelector("#color-btn").addEventListener("click", () => {
  changeClassBackgroundColor(".my-target-class");
});

方案2：动态插入