使用javascript合并颜色

问题描述

| 假设我有一些具有背景和前景色的元素。 假设可能有两种颜色以不同的格式指定（可以在style属性中指定的任何颜色），例如background = \'white \'或\'transparent \'，foreground = \'rgb（0，0，0）\' 。 使用纯JavaScript合并这些颜色以获得rgb（128，128，128）之类的结果的最简单方法是什么？ 谢谢。     

解决方法

        我相信将

opacity

CSS属性设置为前面元素的一半（

0.5

）将使您到达那里。 另外，如果您使用的是jQuery，并且确实希望将其添加到JavaScript中，则可以使用jQuery \ .css（）获得两种颜色，该颜色返回的值类似于

rgb(0,0)

，然后对每种基本颜色（红色，绿色，蓝色），然后使用相同的伪指令（

.css()

）将结果值设置为所需的值。 有帮助吗？     ,        只是因为我喜欢写复杂的脚本。

<span style=\"background-color:black; color:#fff\";>Hi</span>

JS：

function getColorVals(color) {
    color = color.replace(\"rgb\",\"\").replace(\"(\",\"\").replace(\")\",\"\");
    return color.split(\",\");
}
var span = document.getElementsByTagName(\"span\")[0];
var color1 = window.getComputedStyle(span).backgroundColor; //window.getComputedStyle ensures getting back rgb
var color2 = window.getComputedStyle(span).color;
var color1Vals = getColorVals(color1);
var color2Vals = getColorVals(color2);
var newColorVal = \"rgb(\";
for (i = 0; i < 3; i++) {
    newColorVal += Math.round((Math.abs(color1Vals[i] - color2Vals[i]) / 2));
    if(i<2) newColorVal += \",\";
} 
newColorVal += \")\";
alert(newColorVal); 

...您也可以轻松地在其中处理不透明度。 编辑： 在色值计算中弹出Math.round来固定小数等。     ,        您可能需要研究rbgcolor.js。它“接受一个字符串，并尝试从中找出有效的颜色”。也就是说，您可以简单地查看元素上的CSS color属性，将其通过此JS馈送，并获取RGB值。获得RGB值后，只需取每个通道的平均值即可创建新颜色。 如果您的元素的颜色是继承的，则可能需要进行一些处理。例如，如果您的元素没有指定的color属性，请在DOM的所有位置检查其父元素。