Раскрасить текст ссылки цветом из текста самой ссылки

@Престашоп · Регистрация: 12.06.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте
У меня есть форма выбора цвета. К ней есть "заготовки красивых цветов" в виде ссылок-кнопок

HTML5
1
2
3
4
5
6
<div class="as-form-examples d-inline-block py-1" data-col="pageBackgroundColor">
 <a href="#" class="as-form-example badge badge-light mr-1" data-col="pageBackgroundColor">#000000</a>
 <a href="#" class="as-form-example badge badge-light mr-1" data-col="pageBackgroundColor">#096915</a>
 <a href="#" class="as-form-example badge badge-light mr-1" data-col="pageBackgroundColor">#0037b8</a>
 <a href="#" class="as-form-example badge badge-light mr-1" data-col="pageBackgroundColor">#a1201b</a>
</div>

Сами ссылки имеют черный цвет.
Моя задача - раскрасить эти ссылки в цвета, которые указаны в тексте ссылки, т.е. #000000 в черный, #096915 в зеленый, #0037b8 в синий и т.д.
Покрасить все в красный или зеленый легко:

CSS
1
.as-form-example.badge.badge-light.mr-1[data-col=pageBackgroundColor] {color:red;}

А вот как вместо этого red подставить эти #096915 для каждой свою - ??
Спасибо

@NTHing · 09.03.2024, 19:57

JavaScript
1
2
3
4
const links = document.querySelectorAll("a");
links.forEach((el) => {
    el.style.color = el.innerText;
});

@Престашоп · 09.03.2024, 20:12 **[ТС]**

Сообщение от NTHing

Javascript

Спасибо, я хотел попытаться через CSS (скорее в качестве обучения).
Через CSS можно такое сделать?

@NTHing · 09.03.2024, 20:39

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<body>
        <style>
            .as-form-examples {
                a:nth-child(1) {
                    color: #000000;
                }
                a:nth-child(2) {
                    color: #096915;
                }
                a:nth-child(3) {
                    color: #0037b8;
                }
                a:nth-child(4) {
                    color: #a1201b;
                }
            }
        </style>
        <div
            class="as-form-examples d-inline-block py-1"
            data-col="pageBackgroundColor"
        >
            <a
                href="#"
                class="as-form-example badge badge-light mr-1"
                data-col="pageBackgroundColor"
                >#000000</a
            >
            <a
                href="#"
                class="as-form-example badge badge-light mr-1"
                data-col="pageBackgroundColor"
                >#096915</a
            >
            <a
                href="#"
                class="as-form-example badge badge-light mr-1"
                data-col="pageBackgroundColor"
                >#0037b8</a
            >
            <a
                href="#"
                class="as-form-example badge badge-light mr-1"
                data-col="pageBackgroundColor"
                >#a1201b</a
            >
        </div>
    </body>

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .