Как найти на странице все элементы имеющие заданные стили на чистом jQuery?

Question

[gazes12]

Можно ли получить все свойства со всех элементов с указанным значением свойств, средствами jquery?

Например, на сайте много объектов, у каждого объекта используется один цвет в background, или в color, или в box-shadow, text-shadow. Мне нужно получить все свойства объектов с указанным цветом, затем заменить цвет в свойствах, которые будут найдены.

Comments

[Модератор]

Когда вы регистрировались, вы обещали выполнять Регламент. Ваше сообщение нарушило сразу несколько параграфов Регламента - 3.4, 3.6 и другие.
Если вы будете продолжать нарушать Регламент, ваши вопросы могут быть удалены, а аккаунт заблокирован модераторами временно или навсегда.
Будьте благоразумны.

Answer 1

[Илья Петров]

Если стили прописаны в CSS, то нужно открыть css файл и через регулярку найти элементы.
С данным способом, извини, не помогу.

Если стили инлайновые, то элементы можно искать так:

// Если инлайновый стиль одинаковый
$('div[style="color:#444444"]');

// Если часть инлайнового стиля оканчивается на #444444
$('div[style$="#444444"]');

// Если часть инлайнового стиля начинается с color:#fc
$('div[style^="color:#fc"]');

// Если часть инлайнового стиля содержит rgba(255,222,1,0.15)
$('div[style*="rgba(255,222,1,0.15)"]');



// Комбинированный селектор jQuery
// ищем div и section по инлайновым стилям
let items = $(
	'div[style^="border-bottom"]',
	'section[style*="#ffffff"]',
);

// Заменяем стили найденным элементам
items.css({
	'background-color': '#ffcc00',
	'border-bottom': '2px dashed pink',
});

Значения в атрибут можешь подставлять любые.

Answer 2

[Надим]

Конечно можно. В jQuery имеется встроенный метод .filter, который фильтрует найденные элементы по заданному условию, также в jQuery есть метод .css который позволяет узнать то или иное свойство у элемента, итого, объединив 2 этих метода получим то, что вам нужно. Вот пример, найдем все абзацы имеющие строго черный цвет:

$('p').filter(function(n, el) { return $(el).css('color') == 'rgb(0, 0, 0)'; });

Разумеется вместо абзацев можно искать что угодно, просто поставьте звездочку, а свойства можно сравнивать любые.