如何根据class为skill-points的元素文本值修改其background-color？

实现方案 #

基础版本（适配静态页面） #

如果你的页面没有动态新增的.skill-points元素，直接用以下代码即可：

document.addEventListener('DOMContentLoaded', function() {
  // 文本值与背景色的映射规则，后续新增规则直接修改这里即可
  const colorMapping = {
    '1': 'red',
    '2': 'green',
    '3': 'yellow'
  };

  // 获取所有匹配类名的元素
  const skillPoints = document.querySelectorAll('.skill-points');

  skillPoints.forEach(item => {
    // 清除文本前后的空白字符，避免HTML内的空格导致匹配失败
    const text = item.textContent.trim();
    if (colorMapping[text]) {
      item.style.backgroundColor = colorMapping[text];
    }
  });
});

增强版本（适配动态新增元素） #

如果页面会通过JS动态插入.skill-points元素，可以用MutationObserver监听DOM变动，自动给新增元素设置背景色：

// 公共的颜色设置方法
function setSkillPointBg(element) {
  const colorMapping = {
    '1': 'red',
    '2': 'green',
    '3': 'yellow'
  };
  const text = element.textContent.trim();
  if (colorMapping[text]) {
    element.style.backgroundColor = colorMapping[text];
  }
}

document.addEventListener('DOMContentLoaded', function() {
  // 先初始化页面已有的元素
  document.querySelectorAll('.skill-points').forEach(setSkillPointBg);

  // 监听DOM变动，自动处理新增的元素
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType !== Node.ELEMENT_NODE) return;
        // 检查新增元素本身是否符合要求
        if (node.classList.contains('skill-points')) {
          setSkillPointBg(node);
        }
        // 检查新增元素的子元素是否符合要求
        node.querySelectorAll('.skill-points').forEach(setSkillPointBg);
      });
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});

代码说明 #

• 用DOMContentLoaded事件确保DOM完全加载后再执行逻辑，避免出现获取不到元素的问题
• 颜色规则单独放在colorMapping对象中，后续需要新增其他数值对应的颜色，直接修改这个对象即可，不需要改动核心逻辑
• 用trim()处理文本内容，兼容HTML元素内容前后带空格、换行的场景

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