当元素被渲染为蓝色时会触发哪个Javascript事件？

浏览器没有原生提供专门在「元素被渲染为蓝色」时自动触发的JavaScript事件，你可以根据自己的使用场景选择以下实现方案：

• 主动修改样式的场景：如果蓝色是你自己的业务代码修改style属性、切换类名实现的，可以在修改样式的逻辑后手动抛出自定义事件，监听该事件即可完成对应逻辑。
  示例代码：

const targetElement = document.querySelector('#target')
// 监听自定义的蓝色绘制事件
targetElement.addEventListener('drawBlue', () => {
  // 这里写元素变蓝后要执行的逻辑
})

// 修改元素为蓝色，手动触发事件
targetElement.style.backgroundColor = 'blue'
targetElement.dispatchEvent(new CustomEvent('drawBlue'))

• 监听被动样式变更的场景：如果元素颜色变更不是你可控的逻辑触发的，可以用MutationObserver监听元素的style、class属性变化，每次变更时获取元素的计算样式判断是否为蓝色。
  示例代码：

const targetElement = document.querySelector('#target')
const observer = new MutationObserver(() => {
  // 获取元素实际渲染的颜色
  const renderColor = getComputedStyle(targetElement).backgroundColor
  // 匹配标准蓝色，可根据实际需要调整颜色判断规则
  if (renderColor === 'rgb(0, 0, 255)') {
    // 这里写元素变蓝后要执行的逻辑
  }
})
// 开启监听，只关注style和class属性的变化
observer.observe(targetElement, {
  attributes: true,
  attributeFilter: ['style', 'class']
})

额外提示：如果元素的蓝色是CSS动画、过渡效果触发的，还可以搭配animationstart、transitionend等原生事件，结合颜色判断来实现更精准的监听。

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