Question

我从dom元素获得“rgb（18,115,224）”。现在我想将颜色（无论我从这个元素得到什么）分配给span元素。所以我需要十六进制相当于我得到的颜色。为此，我可以使用

"#" + componentToHex(r) + componentToHex(g) + componentToHex(b)

但是，我的问题是如何从“rgb（18,115,224）”获得r，g，b分量值

Answer 1

现在我想将颜色（无论我从这个元素得到什么）分配给span元素。

不，你不能直接使用rgb(18, 115, 224)获取CSS中的颜色值。（但是如果你真的需要它，请参见下面的如何获得十六进制。）无端的例子：

＆＃13;

$("#the-span").css("color", "rgb(18, 115, 224)");

＆＃13;

<span id="the-span">I'm the span</span>

＆＃13;

或者没有jQuery，只为后来发现它的其他人：

＆＃13;

document.getElementById("the-span").style.color = "rgb(18, 115, 224)";

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="the-span">I'm the span</span>

＆＃13;

但是，让我们假设你做需要十六进制由于某种原因：

＆＃13;

function getRGB(str) {
    var result = /rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*\d+\s*)?\)/.exec(str);
    if (result) {
        return "#" +
               toHex(+result[1], 2) +
               toHex(+result[2], 2) +
               toHex(+result[3], 2);
    }
    return undefined;
}

// Note that this is a simplistic toHex appropriate only for this, not negatives or fractionals
function toHex(num, min) {
    var hex = num.toString(16);
    while (hex.length < (min || 0)) {
        hex = "0" + hex;
    }
    return hex;
}

function test(str) {
    display(str + " => " + getRGB(str));
}

test("rgb(18, 115, 224)");
test("rgb(18, 115, 224, 50)");

function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = String(msg);
  document.body.appendChild(p);
}

＆＃13;

这允许我们忽略第四个（alpha）参数的可能性。

Answer 2

您不需要将其转换为任何内容。如果要将此值指定为量程颜色，则只需执行以下操作：

var clr = "rgb(18, 115, 224)";
$('#myspan').css('color', clr);

以rgb（）格式获取颜色的r，g，b分量

2 个答案: