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;
    })
});

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

同时替换多个CSS颜色值

2 个答案: