如何选取通过CSS设置cursor:pointer属性的DOM元素？

嘿，我来帮你理清这个问题～首先得明确：你想用的document.querySelector('[cursor=pointer]')是HTML属性选择器，它只会匹配那些在标签里直接写了cursor="pointer"属性的元素（比如<div cursor="pointer">），但你是通过CSS类来设置的样式，所以这个写法完全找不到目标元素，行不通哦。

下面分几种情况给你靠谱的解决方案：

• 最优方案：直接选择定义样式的类
  既然你是通过.classname这个类来设置cursor:pointer的，那最直接高效的方式就是直接选中这个类的元素：

  // 选中所有带classname类的元素
  const pointerElements = document.querySelectorAll('.classname');
  

  这种方法性能最好，也最符合语义，毕竟类就是用来标识这类元素的，优先用这个！

• 通用方案：检查元素的计算样式
  如果没办法通过类、ID等选择器定位（比如样式是第三方库加的，或者动态生成的），那可以遍历元素，用getComputedStyle检查它最终应用的样式：

  // 可以把'*'换成更具体的标签（比如'div'）来提升性能
  const allElements = document.querySelectorAll('*');
  const pointerElements = Array.from(allElements).filter(element => {
    const computedStyle = window.getComputedStyle(element);
    return computedStyle.cursor === 'pointer';
  });
  

  这个方法会返回所有实际显示为cursor:pointer的元素，不管样式是通过类、内联还是其他CSS规则设置的，但缺点是遍历所有元素性能稍差，所以能不用就不用。

• 特殊情况：匹配内联样式的元素
  如果元素是通过内联样式直接写的style="cursor:pointer"，那可以用属性选择器匹配内联样式里的内容：

  // 匹配内联样式里包含cursor:pointer的元素（注意空格，比如cursor: pointer要对应调整）
  const pointerElements = document.querySelectorAll('[style*="cursor:pointer"]');
  

  但这个方法局限性很大，只能匹配内联样式，而且对空格、写法格式很敏感，不推荐作为通用方案。

总结一下：优先用类选择器，只有当实在没办法通过类定位时，再考虑计算样式筛选的方法。

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