根据表格单元格的当前颜色,我试图更改颜色,或者在鼠标离开单元格时保持相同颜色。这是我的剧本:
<script>
$('.tableCell')
.mouseenter(function () {
$(this).find(".hideCheckBox").show();
})
.mouseleave(function () {
$(this).find(".hideCheckBox").hide();
if ($(this).find(".hideCheckBox").is(":checked")) {
$(this).css("backgroundColor", "#10657e");
$(this).css("color", "white");
}
else {
if ($(this).style.backgroundColor === "#157fa0") {
} else {
$(this).css("backgroundColor", "white");
$(this).css("color", "black");
}
}
});
</script>
但是我的比较(下面)不起作用。如何在JavaScript中进行比较以使其正常工作?
if ($(this).style.backgroundColor === "#157fa0") {
答案 0 :(得分:0)
尝试比较RGB值:
if ($(this).style.backgroundColor == 'rgb(21, 127, 160)') {
答案 1 :(得分:0)
<强>问题强>
您遇到的问题是不同的浏览器可能会以不同的方式报告颜色。例如,您可以将颜色设置为#ff0000
,但是当您要求它时,您会返回rgb(255, 0, 0)
。
解决方法强>
比较背景颜色最安全的方法是使用要比较的颜色创建临时元素。然后,检索temp元素的颜色,并将该颜色与您实际感兴趣的元素的颜色进行比较。当单元测试角度修改元素颜色的指令时,我们使用此解决方法。
示例(使用jQuery)
var getExpectedColor = function(color) {
// This is necessary because the browsers representation of a color may be different than what you set.
// For instance, you maybe set the color to #ff0000, and when you ask for it, get back rgb(255, 0, 0).
var temp = $('<div>');
$('body').append(temp);
var expected = temp.css('background-color', color).css('background-color');
temp.remove();
return expected;
};
if ($(this).css('background-color') === getExpectedColor('#157fa0')) {
// bingo
}