如何在JavaScript中比较颜色？

为什么这样不行？即使颜色等于

#ECECF4

它仍会提示“否”。 它正在选择我已经测试过的相应元素。有没有更好的方法写这个

<script type="text/javascript">

function weekclick() {
    if (document.getElementById('w1').style.backgroundColor == "#ECECF4") {
        alert("Yes");
    } else {
        alert("No");
    }
}

</script>

函数weekclick（）{
if（document.getElementById（'w1'）.style.backgroundColor==“#ECECF4”）{
警惕（“是”）；
}否则{
警告（“否”）；
}
}

应不惜一切代价避免将颜色作为业务逻辑的一部分进行比较。

相反，将逻辑保存在JavaScript中，并根据保存在某处的状态进行操作。然后，如果希望通过更改颜色向用户发送视觉反馈，请向元素添加一个类。这样，JavaScript只知道类名，样式在CSS中始终是孤立的

$（“.list”）。在（“单击”、“li”，函数（）上）{
$（this.toggleClass（'active'）；
});
.list{
宽度：100%；
填充：0；
}
李先生{
填充物：5px10px；
列表样式：无；
光标：指针；
}
.列表李：悬停{
背景色：rgba（0,0,0,0.05）；
}
.list li.active{
背景色：#EECC；
}


测试1
测试2
测试3
我建议使用“==”stric equal（我想这就是名字）

比如：

这种方法建议使用JQuery的
背景色
，它标准化了对
rgb（r，g，b）
的响应

也许这个答案会有所帮助。将颜色代码转换为十六进制，然后比较每个RGB颜色/通道（我不知道单词）


我认为比较两个数字比比较两个字符串更好，也更容易。实际上，我只是在学习javascript，但不是创建一个将rgb（）转换为十六进制的函数，而是可以创建一个具有相同背景颜色的div，并将其与该div的背景色相比较。如果您碰巧已经有一个十六进制值的div，您可以这样做：

//javascript
if (document.getElementId('desiredElementToCompare').style.backgroundColor === document.getElementId('elementWithTheDesiredHexString').style.backgroundColor)

//jQuery
if ($('#desiredElementToCompare').css('background-color') === $('#elementWithTheDesiredHexString').css('background-color')

您可以使用函数创建一个div，然后执行如下比较：

var compareHex = (hex) => {
    var hexString = document.createElement('div')
    hexString.style.backgroundColor = `${hex}`
    return hexString.style.backgroundColor
}
//then compare
//javascript
if (document.getElementId('desiredElementToCompare').style.backgroundColor === compareHex("#ECECF4"))

//jQuery
if($('#desiredElementToCompare').css('background-color') === compareHex("#ECECF4")

使用
画布
比较颜色。

使用颜色字符串填充一个像素

另一个像素使用元素
getComputedStyle
color属性

使用
Array.from
和
JSON.stingify


/**
*测试元素颜色属性是否包含特定颜色。
* https://stackoverflow.com/a/60689673/383904
* 
*@param{Object}el DOM节点元素
*@param{String}prop一个CSS属性颜色属性
*@param{String}color一个有效的CSS颜色值
*如果元素颜色匹配@return{Boolean}True
*/
函数isElPropColor（el、道具、颜色）{
const ctx=document.createElement（'canvas'）.getContext（'2d'）；
ctx.fillStyle=颜色；
ctx.fillRect（0,0,1,1）；
ctx.fillStyle=getComputedStyle（el，null）.getPropertyValue（prop）；
ctx.fillRect（1,0,1,1）；
const a=JSON.stringify（Array.from（ctx.getImageData（0,0,1,1.data））；
const b=JSON.stringify（Array.from（ctx.getImageData（1,0,1,1.data））；
ctx.canvas=null；
返回a==b；
}
//测试（PS：参见CSS！）：
const el=document.body；
常量属性='背景色'；
console.log（isElPropColor（el，prop，'red'））；//显然是这样：）
console.log（isElPropColor（el，prop，#f00'））；//真的
log（isElPropColor（el，prop，'rgb（255，0，0）'）；//真的
log（isElPropColor（el，prop'hsl（0,100%，50%））；//真的
log（isElPropColor（el，prop，'hsla（0,100%，50%，1）'）；//正确
body{background:red；}
此脚本放置在何处/何时运行？它放置在此处1
并在单击时运行颜色代码以小写形式存储。因此
#ececf4
将起作用。@Teemu
#ecececf4
仅适用于IE。虽然这在代码中没有添加太多内容的情况下效果很好，但我发现仅为了比较颜色而获取页面中的另一个元素效率低下。
var compareHex = (hex) => {
    var hexString = document.createElement('div')
    hexString.style.backgroundColor = `${hex}`
    return hexString.style.backgroundColor
}
//then compare
//javascript
if (document.getElementId('desiredElementToCompare').style.backgroundColor === compareHex("#ECECF4"))

//jQuery
if($('#desiredElementToCompare').css('background-color') === compareHex("#ECECF4")