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

【问题标题】：select dom which have css property cursor:pointer选择具有 css 属性 cursor:pointer 的 dom
【发布时间】：2020-07-22 06:41:02
【问题描述】：

<div class="classname">some test<div>
<style> div.classname{cursor:pointer}</style>

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

不确定下面的内容

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

【问题讨论】：

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

标签： jquery css jquery-selectors

【解决方案1】：

我们可以使用

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

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

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

&lt;div class="classname" style="cursor:pointer"&gt;some test&lt;div&gt;

要找到基于 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;
}

【讨论】：