如何使用纯JavaScript检测点击元素是否含有background属性？

嘿，我来帮你完善这个需求！你想检测页面上被点击的元素是否带有background相关属性，你的初始思路方向是对的，但有个关键局限需要修正，咱们一步步来：

你的代码的局限 #

你当前的代码是这样的：

var img = document.querySelectorAll('*'); 
img.forEach(function(image){ 
  image.addEventListener("click",function(e){ 
    e.preventDefault(); 
    if(this.style.background){ 
      console.log("yes"); 
    } 
  }); 
});

这里的问题在于：this.style.background只能读取元素内联样式（也就是写在元素的style属性里的样式）中的background值。如果元素的背景是通过CSS类、内部样式表或者外部样式定义的，这个方法就检测不到了。比如<div class="has-bg"></div>（其中.has-bg { background: #ccc; }），你的代码就会漏掉这个元素。

优化后的解决方案 #

我们可以用window.getComputedStyle()来获取元素最终渲染的计算样式，它能拿到元素实际显示的所有样式，不管样式来源是哪里。同时，改用事件委托（给document绑定一个点击事件）来替代给每个元素绑事件，性能会好很多：

document.addEventListener('click', function(e) {
  e.preventDefault();
  const target = e.target;
  // 获取元素的计算样式
  const computedStyle = window.getComputedStyle(target);
  
  // 根据你的需求调整判断条件：
  // 1. 如果要检测是否有背景图
  if (computedStyle.backgroundImage !== 'none') {
    console.log('✅ 该元素带有背景图！');
    console.log('背景图地址：', computedStyle.backgroundImage);
  }
  // 2. 如果要检测是否有非透明背景色
  else if (computedStyle.backgroundColor !== 'rgba(0, 0, 0, 0)' && computedStyle.backgroundColor !== 'transparent') {
    console.log('✅ 该元素带有非透明背景色！');
    console.log('背景色：', computedStyle.backgroundColor);
  }
  // 3. 如果只要存在任何背景属性（包括默认值之外的设置）
  else if (computedStyle.background !== 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box') {
    console.log('✅ 该元素设置了背景属性！');
  } else {
    console.log('❌ 该元素没有有效的背景属性');
  }
});

关键细节说明 #

• 事件委托：只给document绑定一个点击事件，通过e.target获取实际被点击的元素，避免给大量元素绑定事件造成内存浪费，尤其适合元素动态增减的场景。
• getComputedStyle：它返回的是元素最终渲染时的样式对象，能覆盖所有样式来源（内联、CSS类、外部样式表等）。
• 判断条件灵活调整：根据你的实际需求选择对应的判断逻辑——比如你可能只关心是否有背景图，或者是否有非透明背景色，都可以针对性修改条件。

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