如何用JS或CSS监听HTML span文本变化并按数值设置图表颜色

CSS本身没有能力监听DOM元素的文本内容变化，该需求需要通过JS实现，以下是两种可行的实现方案：

方案1：MutationObserver 监听span内容变化（推荐，无入侵性） #

该方案是W3C标准的DOM变化监听方案，不需要修改你现有更新span数值的业务逻辑，只要span文本发生变化就会自动触发回调。

<!-- 给你的目标span加唯一标识方便选中 -->
<span id="chart-value">25</span>

// 选中目标span和要改色的图表元素
const valueSpan = document.getElementById('chart-value')
const chartDom = document.querySelector('.你的图表元素选择器')

// 颜色更新逻辑
function syncChartColor() {
  // 读取span文本转数字，加容错避免非数值场景报错
  const num = Number(valueSpan.textContent.trim()) || 0
  let targetColor = ''
  if (num <= 20) {
    targetColor = 'green' // 可替换为自定义色值，比如#2ecc71
  } else if (num <= 30) {
    targetColor = 'yellow' // 可替换为#f1c40f
  } else {
    targetColor = 'red' // 可替换为#e74c3c
  }
  // 按需修改图表的样式，比如背景色、描边色、填充色等
  chartDom.style.backgroundColor = targetColor
  // 如果需要同时改span本身的文字颜色，加下一行即可
  // valueSpan.style.color = targetColor
}

// 初始化执行一次，保证页面加载后颜色和数值匹配
syncChartColor()

// 实例化监听对象
const observer = new MutationObserver(syncChartColor)
// 配置监听规则：仅监听文本内容变化
observer.observe(valueSpan, {
  characterData: true,
  childList: true,
  subtree: true
})

// 后续不需要监听时可以调用销毁方法释放资源
// observer.disconnect()

方案2：主动触发更新（性能最优，适合可控制数值更新逻辑的场景） #

如果你可以修改更新span数值的代码，直接在修改数值后调用颜色更新方法即可，不需要额外监听，性能更高：

// 你的数值更新逻辑
function updateValue(newVal) {
  valueSpan.textContent = newVal
  // 直接调用颜色同步方法
  syncChartColor()
}

内容的提问来源于stack exchange，提问作者kw1c-MuurmansLorentz