Можно ли с помощью javascript/jquery изменять свойства всех элементов?

Question

[Lord_Dantes]

Доброе времени суток.
Допустим у меня страница

И как видно у некоторых элементов есть то что их объединяет и это коричневый цвет.. не будет углубляться в подробности
Можно же как-то с помощью js или jquery выбрать элементы у которых назначен этот цвет, и изменял их на другой указанный в скрипте.
Также нужно чтобы можно было определить именно те элементы у которых есть именно этот цвет то есть не надо выбирать левые элементы и им давать цвет, если у них его и так не было...
Также подскажите можно ли проверять свойство у элемента и потом изменить его.
Надеюсь пояснил суть вопроса..
Всем, удачи и добра!

Comments

[Lord_Dantes]

SmInc, Спасибо но это не то что нужно..
Я имею ввиду выборку по неизвестным элементам так как я не смогу каждой тысяче ставить один клас..
Чтобы брать абсолютно все элементы, потом отсеить те у которых нету допустим color:red; и позже изменить им этот color:red на color:black..

[Lord_Dantes]

SmInc, я не соглашусь с тобой, во-первых вы же не задаете всем элементам имеющим один цвет один класc?
Мне просто нужно копировать одну страницу и менять у неё определенный цвет, а не создавал +100500 классов на каждый цвет, и я хотел это сделать не вручную ,а допустим с помощью скрипта.
Возможно я не правильно уяснил суть проблемы и указал неверные данные, прощу прощения тогда за данный инцидент.Спасибо за решение всего доброго.

Answer 1

[Владимир Проскурин]

Посмотрите, какие css классы устанавливают этот цвет, и пройдитесь по элементам с этими классами и назначьте цвет. А лучше сами в html добавьте этим элементам класс например .target, и пройдитесь по всем элементам с таким классом через document.querySelector('.target') или jQuery('.target')

Comments

[Lord_Dantes]

Спасибо но это не то что нужно..
Я имею ввиду выборку по неизвестным элементам так как я не смогу каждой тысяче ставить один клас..
Чтобы брать абсолютно все элементы, потом отсеить те у которых нету допустим color:red; и позже изменить им этот color:red на color:black..

[Владимир Проскурин]

Слава Бандура, можно конечно сделать что-то типа такого

var elements = document.querySelectorAll( 'body *' );
[].forEach.call(elements, function(el) {
    if (el.style.color === 'red') { // искомый цвет. Вместо red подставьте свое значение
        el.style.color = 'green'; // заменяемый цвет. Вместо green поставьте свое значение
    }
});

Но это нерационально, т.к. нужно проходить все элементы. Селектора, который может искать по цвету - нет, поэтому только такие извращения. Если есть возможность, то лучше сузить поиск. Например вместо звездочки body * (все элементы) поставить определенные теги (например div), или вместо body указать контейнер, в котором будут лежать элементы, у которых нужно менять цвет.

[Lord_Dantes]

Владимир Проскурин, спасибо за решение, это именно то что нужно! Я понял суть скрипта, дай Бог вам здоровья))00))

Answer 2

[Денис Клепко]

Есть свойство метод getComputedStyle

const element = document.querySelector('.element')
const style = getComputedStyle(element)

Подробнее тут написано https://zellwk.com/blog/css-values-in-js/

Comments

[Lord_Dantes]

Спасибо но это не то что нужно..
Я имею ввиду выборку по неизвестным элементам так как я не смогу каждой тысяче ставить один клас..
Чтобы брать абсолютно все элементы, потом отсеить те у которых нету допустим color:red; и позже изменить им этот color:red на color:black..

[Денис Клепко]

Синтаксис не соблюден, это код работать не будет. Постарался логику описать. Думаю это реализуемо, хотя запрос на перебор всего и довольно тяжелый.

$("*").each(function(index, el) {
				style = getComputedStyle( $(this) )

				if(style.color == "red") { // в style есть все значения текущего элемента
					//что-то делаем
					//например, $(this).css('color': 'white')
				}
			});

Answer 3

[Сергей delphinpro]

:root {
  --main-color: blue;
}

.block1 { background: var(--main-color); }
.block2 { background: var(--main-color); }
.block3 { background: var(--main-color); }

// Меняем все сразу
document.documentElement.style.setProperty('--main-color', 'red');