select dom 其中有 css 属性 cursor:pointer

Question

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

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

不确定下面的内容

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

Answer 1

我们可以使用

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

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

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

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

根据 computed 样式 ^{查找 dom 元素（就像在本例中使用 class )} 我们需要遍历页面上的所有元素，然后使用 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>

Answer 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;
}

select dom 其中有 css 属性 cursor:pointer

select dom which have css property cursor:pointer

css

jquery

jquery-selectors