Question

我有一个使用多种颜色的具有multis类的模板，我可以使用JavaScript将其动态更改为另一种颜色吗？

页面加载后，找到颜色为＃512a69的所有div，span，p，h，并将其更改为＃ef7e8e。

有可能吗？

谢谢。

Answer 1

这是一个解决方案，我将逐步解释。

首先，致电colorReplace("#512a69", "#ef7e8e");。第一个值是目标颜色，第二个值是替换颜色。

在其中，$('*').map(function(i, el) {将选择DOM树中的所有标签。对于每个元素，返回其getComputedStyle(el)样式数组。您可以自定义选择器以进行更快的处理（例如$('div').map(function(i, el)) {）。

所有包含“颜色”的样式属性（例如background-color，-moz-outline-color等），将检查颜色值是否等于目标颜色。如果是这样，它将被替换为目标颜色。

返回的颜色类似于rgba(0,0,0,0)或rgb(0,0,0)，而不是#FFFFFF，因此为了比较，从rgb快速转换为十六进制。它使用内部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

通过JavaScript在所有CSS样式中更改一种颜色

1 个答案: