对于任何给定的Dom节点，查找具有css样式的节点

Question

我正试图找到一种方法来获得所有指定样式的元素。

//let's say
let d = $(document)

没有办法为所有有.css('background-image')的孩子做d.find或d.filter。必须搜索的节点总是不同的，因为它来自mutation.target。

Answer 1

使用选择器*找到所有元素，然后使用.filter()测试.css()与您想要的样式。

$(document).find("*").filter(function() {
return $(this).css('background-image');
});

Answer 2

试试下面的例子:

var elements = document.querySelectorAll(
'li[style*="background:red"]'
);
console.log(elements);

<ul>
<li style="background:red;">test1</li>
<li style="background:blue;">test2</li>
<li style="background:green;">test3</li>
<li style="background:red;;">test4</li>
</ul>

Answer 3

这是一个通用的解决方案，根据它的样式属性，但每个属性都有它自己的结构，例如背景和颜色是在rgb()结构，我将给出一个简单的例子宽度样式属性:

const elements = $('li').filter(function() {
return getComputedStyle(this).width == '100px';
});
console.log('elements: ', elements)

.width-100 { width: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul>
<li style="background:red;">test1</li>
<li style="background:red; width:100px">test2</li>
<li style="background:red;">test3</li>
<li class="width-100" style="background:red;">test4</li>
</ul>