Я пытаюсь найти способ получить все элементы с указанными стилями.

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

Невозможно сделать d.find или d.filter для всех детей, у которых есть .css('background-image'). Узел, который нужно искать, всегда отличается, поскольку он происходит от mutation.target.

-1
Adam 22 Сен 2021 в 00:59

3 ответа

Лучший ответ

Используйте селектор *, чтобы найти все элементы, затем используйте .filter(), чтобы протестировать .css() в желаемом стиле.

$(document).find("*").filter(function() {
    return $(this).css('background-image');
});
1
Barmar 21 Сен 2021 в 22:20

Попробуйте следующий пример:

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>
0
Rateb Habbab 21 Сен 2021 в 22:08

Вот общее решение, которое получает элементы в соответствии со свойством стиля, но каждое свойство имеет свою собственную структуру, например фон и цвет находятся в структуре 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>
0
Rateb Habbab 21 Сен 2021 в 22:31