选择具有 css 属性 cursor:pointer 的 dom

Posted 2023-05-09

【中文标题】选择具有 css 属性 cursor:pointer 的 dom

【英文标题】：select dom which have css property cursor:pointer

【发布时间】：2020-07-22 06:41:02

【问题描述】：

<div class="classname">some test<div>
<style> div.classnamecursor:pointer</style>

我想选择上面的 CSS 示例分配了光标指针的 dom

不确定下面的内容

document.querySelector('[cursor=pointer]')

【问题讨论】：

是否会有很多带有光标指针的类，如果你无论如何都要有类，为什么不创建一个名为“point-cursor”的类并将其分配给元素以及其他类。然后，您可以更轻松地查询选择该类的任何内容。

【参考方案1】：

我们可以使用

document.querySelector('[style*="cursor:pointer"]')

但这仅适用于我们直接使用style 属性在元素上设置的 inline 样式，如下所示：

const elem = document.querySelector('[style*="cursor:pointer"]')
console.log( elem )

<div class="classname" style="cursor:pointer">some test<div>

---

要找到基于 computed 样式的 dom 元素 ^{（就像在这种情况下使用类）} 我们需要遍历所有元素在页面上，然后使用getComputedStyle() 方法，如：

(function() 
  // Get all elements on the page
  let elms = [...document.querySelectorAll('*')];
  
  // loop through all elements and getComputedStyle 
  elms.some(el => 
    let compStyles = window.getComputedStyle(el);
    
    // Find the cursor property of current dom element
    if (compStyles.getPropertyValue('cursor') == 'pointer') 
      console.log('Element found')
      console.log(el)
      return true; // break the loop here
    
  );
)();

div.classname 
  cursor: pointer

<div class="classname">some test
<div>

【参考方案2】：

我想出了以下解决方案

function getCursorPointerDomArray()

    let ar=[];
    let dom=document;
    function iterateDomNode(dom)
    
        let c,noIterate=false;
        try   
            c=getComputedStyle(dom);
            if(c.getPropertyValue('cursor')=='pointer')
            
                ar.push(dom);         
                noIterate=true;
            
        catch(e)
        

        
        if(dom.hasChildNodes() && noIterate==false)
        
            for(let i=0;i<dom.childNodes.length;i++)
            
                iterateDomNode(dom.childNodes[i]);
            
                
       
    iterateDomNode(dom) 
    return ar;