1

这是如何工作的（div cirlcedecider2 的样式为“绿色”）

function badge1(){
if (document.getElementById("circledecider2").style.color == "green"){

document.getElementById("badge1").style.backgroundColor= "#ABCF37";
document.getElementById("badge1").style.width = "200px";
document.getElementById("badge1").style.height = "200px";

}}

但这不？（div cirlcedecider2 的样式为“#ABCF37”）

function badge1(){
if (document.getElementById("circledecider2").style.color == "#ABCF37"){

document.getElementById("badge1").style.backgroundColor= "#ABCF37";
document.getElementById("badge1").style.width = "200px";
document.getElementById("badge1").style.height = "200px";

}}

唯一的区别是使用十六进制代码。

4

3 回答 3

0

#ABCF37被解析并更改为不同的格式。结果很可能是特定于浏览器的。

document.body.style.color = "#ABCF37"
document.body.style.color; // "rgb(171, 207, 55)"

而且很明显

"rgb(171, 207, 55)" == "#ABCF37"; // false

您将需要编写一些函数来解释颜色并返回一些您可以比较的标准（可能是rgba格式），或者一个比较两种颜色的函数（这可能更容易）。

function compareColour(col1, col2) {
    var e = document.createElement('span')
    document.body.appendChild(e);
    // standardise
    e.style.color = col1;
    col1 = window.getComputedStyle(e).color;
    e.style.color = col2;
    col2 = window.getComputedStyle(e).color;
    // cleanup
    document.body.removeChild(e);
    return col1 === col2;
}

compareColour("#ABCF37", "rgb(171, 207, 55)"); // true
于 2013-09-12T12:40:49.327 回答
0

参考颜色

function badge1(){
if (document.getElementById("circledecider2").style.color == "rgb(171, 207, 55)")
{

document.getElementById("badge1").style.backgroundColor= "#ABCF37";
document.getElementById("badge1").style.width = "200px";
document.getElementById("badge1").style.height = "200px";

}}
于 2013-09-12T12:44:00.630 回答
0

您检索的颜色是特定于浏览器的。

在IE你可以看到浏览器返回hex值，因为你的代码也应该hex在小写的情况下比较字母表，即#abcf37在你的情况下。

其他浏览器喜欢以格式chrome返回它。rgb

如果以 rgb 形式返回，另一种解决方案是将值转换为十六进制格式。

请参阅此处的答案以获取替代解决方案。

于 2013-09-12T12:58:45.620 回答