同时替换多个 CSS 颜色值

Question

我正在制作一个用户可以选择页面颜色的网站。该网站仅使用两种颜色。背景颜色和其他所有颜色。 （文本、边框和背景颜色在单独的框中。）

我尝试让 Spectrum.js 更改除背景颜色和彩色框上的文本以外的所有颜色。

我正在尝试修改由 ariel 找到的 here 代码。

var initialColor = "#E84E1B";
$("body").css("color", initialColor);
$("divwithfill").css("border-color", initialColor);

function updateColor(element, color) {
    $(element).css("color", (color ? color.toHexString() : ""));
}

$("#colorChanger").spectrum({
    color: initialColor,
    move: function (color) {
        updateColor(".output.render", color);
    },
    hide: function (color) {
        updateColor(".output.render", color);
    }
});

小提琴： http://jsfiddle.net/mjHUD/31/ 这是在here 中找到的小提琴的副本。我正在尝试将所有 #E84E1B 值更改为用户选择的颜色。

编辑： 指定：我希望用户能够使用 #colorChanger 更改默认为 #E84E1B 的所有 CSS 值。 （包括背景颜色和边框）所有带有#c6c6c6 的CSS 值我希望保持不变。我希望这更有意义。

Answer 1

所以问题是您实际上不能通过它们的 css 值来选择元素，但是您可以访问附加到文档的样式表并用它们做一些非常时髦的事情。

这里有点不同的方法。无需添加额外的类。不需要外部库。基本上...

• 循环浏览附加到文档的每个样式表。
• 遍历这些样式表中的每个规则。
• 遍历这些规则中的每个属性。
• 根据输入字符串测试每个属性的值。

• 如果值与输入字符串匹配

  • 将属性值设置为新颜色。

• 循环完成后，返回输入颜色以保存它，以便我们重新开始。

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    rgb = 'rgb(';
    rgb += parseInt(result[1], 16) + ", ";
    rgb += parseInt(result[2], 16) + ", ";
    rgb += parseInt(result[3], 16) + ')';
    return rgb;
}

var initialColor1 = hexToRgb("#C6C6C6");
var initialColor2 = hexToRgb("#E84E1B");
function chameleon(hex, initial) {
    var rgb = hexToRgb(hex);
    var stylesheets = document.styleSheets, stylesheet, i;
    for (i = 0; (stylesheet = stylesheets[i]); i++) {
        var rules = stylesheet.cssRules, rule, j;
        if(!rules) continue;
        for(j = 0; (rule = rules[j]); j++) {
            var styles = rule.style, style, k;
            for(k = 0; (style = styles[k]); k++) {
                var value = styles.getPropertyValue(style);
                if(initial == value) {
                    styles.setProperty(style, rgb);
                }
            }
        }
    }
    return rgb;
}
document.getElementById('picker1').oninput = function(e) {
    initialColor1 = chameleon(e.target.value, initialColor1);
}
document.getElementById('picker2').oninput = function(e) {
    initialColor2 = chameleon(e.target.value, initialColor2);
}

body { background-color: #C6C6C6; color: #E84E1B;}#divwithfill { height: 50px; width: 50px; border: solid 1px #E84E1B; background-color: #E84E1B; color: #C6C6C6; }#divnofill { height: 50px; width: 50px; border: solid 1px #E84E1B;}

<span class="output render" id="text1">sample text</span>
<div id="divwithfill">sample text</div>
<div id="divnofill">sample text</div>
<label for="picker1">Color #1: <input type="color" id="picker1" value="#C6C6C6"></label><br>
<label for="picker2">Color #2: <input type="color" id="picker2" value="#E84E1B"></label>

Answer 2

我为您提供了一个解决方案，使用普通的旧 javascript 和 css 可能会更容易。 demo

一些示例html：

<div id="container">
    <div class="box changeable">
        Sample Text
    </div>
    <br />
    <div class="box unchangeable">
        Sample Text
    </div>
</div>
<div>border<input id="border-colorer" type="color" /></div>
<div>text<input id="text-colorer" type="color" /></div>
<div>background<input id="background-colorer" type="color" /></div>

像这样设置你的 css 以从容器中继承颜色：

#container .changeable {
    background-color:inherit;
    color:inherit;
    border-color:inherit;
}
.box {
    border-width:1px;
    border-style:solid;
}

然后为颜色选择设置侦听器，这将在容器上设置样式。

var parent = document.getElementById('container');
var changeable = container.querySelectorAll('.changeable');

document.getElementById('border-colorer').addEventListener('change', function(e) {
    [].forEach.call(changeable, function(el){
        el.style['border-color'] = e.target.value;
    })
});

document.getElementById('text-colorer').addEventListener('change', function(e) {
    [].forEach.call(changeable, function(el){
       el.style.color = e.target.value;
    })
});

document.getElementById('background-colorer').addEventListener('change', function(e) {
    [].forEach.call(changeable, function(el){
        el.style['background-color'] = e.target.value;
    })
});

现在，当您更改选择中的颜色时，样式将设置在容器中唯一可更改的元素上。