Изменить один цвет во всем стиле CSS с помощью JavaScript - PullRequest
Новая
       7

Изменить один цвет во всем стиле CSS с помощью JavaScript

0 голосов
/ 30 октября 2019

У меня есть шаблон с кратным классом, использующий один цвет, могу ли я динамически изменить этот цвет на другой, используя javascript?

Когда страница загружается, найдите все div, span, p, h, с цветом #512a69 и измените его на # ef7e8e.

Возможно ли это?

Спасибо.

1 Ответ

0 голосов
/ 07 ноября 2019

Вот решение, которое я объясню шаг за шагом.

Сначала позвоните colorReplace("#512a69", "#ef7e8e");. Первое значение - это целевой цвет, а второе - замещающий цвет.

Внутри него $('*').map(function(i, el) { выберет все теги в дереве DOM. Для каждого элемента возвращается массив getComputedStyle(el) styles. Вы можете настроить селектор для более быстрой обработки (например, $('div').map(function(i, el)) {).

Все атрибуты стиля, содержащие «цвет» (например, background-color, -moz-outline-color и т. Д.), Будет проверено, если значение цветаравно вашему целевому цвету. Если это так, он будет заменен целевым цветом.

Цвета возвращаются как rgba(0,0,0,0) или rgb(0,0,0), а не как #FFFFFF, поэтому для сравнения выполняется быстрое преобразование из rgb в hex. При этом используется внутренняя функция rgb2hex().

Надеюсь, это то, что вы ищете. 

function colorReplace(findHexColor, replaceWith) {
    // Convert rgb color strings to hex
    // REF: https://stackoverflow.com/a/3627747/1938889
    function rgb2hex(rgb) {
        if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }

    // Select and run a map function on every tag
    $('*').map(function(i, el) {
        // Get the computed styles of each tag
        var styles = window.getComputedStyle(el);

        // Go through each computed style and search for "color"
        Object.keys(styles).reduce(function(acc, k) {
            var name = styles[k];
            var value = styles.getPropertyValue(name);
            if (value !== null && name.indexOf("color") >= 0) {
                // Convert the rgb color to hex and compare with the target color
                if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
                    // Replace the color on this found color attribute
                    $(el).css(name, replaceWith);
                }
            }
        });
    });
}

// Call like this for each color attribute you want to replace
colorReplace("#512a69", "#ef7e8e");

Источник: https://stackoverflow.com/a/30724171/1136132

...