Выбрать все элементы с определенным цветом?

#css #userstyles

#css #пользовательские стили

Вопрос:

Есть ли селектор, который может выбирать все элементы с определенным цветом? Я хочу изменить весь текст color: #1a0dab на color:00b0f4 .

1. Как определяются стили? Если встроенный, вы можете сделать document.querySelectorAll('[style*="#1a0dab"]') или аналогичный.

2. К сожалению, это всего лишь пользовательские стили, основанные на стилусе, а не на пользовательских скриптах, поэтому о jQuery не может быть и речи. Я должен был указать, поскольку все, что я нашел при самостоятельном поиске, было связано с jQuery. Извините за это.

3. Вы имеете в виду, что о JavaScript не может быть и речи, или просто jQuery?

4. Я не верю, что пользовательские стили поддерживают что-либо еще, кроме CSS, а может быть, И МЕНЬШЕ.

Ответ №1:

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

 [style*="#1a0dab"] {
    color: #00b0f4 !important;
}

ДЕМОНСТРАЦИЯ:

Показать фрагмент кода

 [style*="#1a0dab"] {
    color: #00b0f4 !important;
}

 <p style="color: #1a0dab">paragraph 1</p>

<p>paragraph 2</p>

<p style="color: #1a0dab">paragraph 3</p>

Нет чистого CSS-способа сделать это, если исходные стили не определены в строке.

Если у вас есть доступ к JavaScript, вы можете сделать что-то вроде следующего, хотя производительность, вероятно, будет низкой, если на вашей странице много элементов или вам нужно часто запускать функцию:

 [...document.querySelectorAll('*')]
    .filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')

Обратите внимание, что для проверки равенства необходимо использовать представление RGB, а не шестнадцатеричную версию.

Вот демонстрация последнего подхода:

Показать фрагмент кода

 [...document.querySelectorAll('*')]
    .filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')
    .forEach(el => el.style.color = '#00b0f4')

 .has-color {
    color: #1a0dab;
}

 <p class="has-color">paragraph 1</p>

<p>paragraph 2</p>

<p class="has-color">paragraph 3</p>

Ответ №2:

В Javascript / jQuery такого селектора нет. Возможно, вы можете: 1 — Обновить файлы CSS и вместо этого найти / заменить все экземпляры 2 — Добавить класс ко всем необходимым элементам, а затем использовать класс для их таргетинга.

Ответ №3:

Вы должны составить список всех тегов, которые вам нужны для изменения цвета, а затем с помощью jquery задать уникальный порядок изменения цвета