如何获得td颜色以再次单击更改颜色？

Question

这是下面的代码。 我试图撤消已经做出的点击。 这是使用td标签发生的。 我结合了来自这里和其他论坛的几个问题的失败实验。

function changeColor(elem) {
    if (elem.style.backgroundColor = "#5AD9C1" || "transparent") {
        elem.style.backgroundColor = "#66FF66";
    } else if (element.style.backgroundColor = "#66FF66") {
        elem.style.backgroundColor = "#5AD9C1";
    }
};

Answer 1

第一：

// With '=' you do assign a value to backgroundColor
if (elem.style.backgroundColor = "#5AD9C1" ...)

// Use '==' to check, if a equals b
if(elem.style.backgroundColor == "#5AD9C1" ...)

第二：

您不能像这样链接if语句：

if(myVar == 'A' || 'B' || 'C')

与询问if（'B'）始终为真相同

您必须这样做：

if(myVar == 'A' || myVar == 'B' || myVAR == 'C')

有关if语句和运算符的详细信息，请参见https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else

正确的解决方案是：

function changeColor(elem) {
    if (elem.style.backgroundColor == "#5AD9C1" || elem.style.backgroundColor == "transparent") {
        elem.style.backgroundColor = "#66FF66";
    } else if (element.style.backgroundColor == "#66FF66") {
        elem.style.backgroundColor = "#5AD9C1";
    }
}

编辑：

如评论中所述，这不起作用的主要原因是style.backgroundColor将颜色返回为RGB值

我找到了将rgb转换为十六进制的解决方案 。

Answer 2

您应该使用一个类，以便可以从样式表进行维护。

.state2 {
   background-color: #66FF66;
}
.state1{
   background-color: #5AD9C1;
}

可能其中一种状态可能是多余的，应该应用于基本元素，从而允许您切换类。

如果您有可用的jQuery，请使用以下代码：

if($element.hasClass('state1')) {
   $element.removeClass('state1').addClass('state2');
else{
   $element.removeClass('state2').addClass('state1');
}

上面的内容可以改进很多，特别是如果有一些示例HTML。

如果您不习惯使用jQuery，则可以查看替代方法或使用其中一些替代方法： http : //toddmotto.com/creating-jquery-style-functions-in-javascript-hasclass-addclass-removeclass-toggleclass /

编辑：我添加了一个解决您的问题的答案。 尽管我仍然不建议这样做： http : //jsfiddle.net/po16f5ec/4/

我还引用了本文，以将十六进制转换为rgb： RGB转换为Hex，将十六进制转换为RGB

Answer 3

许多浏览器（当然是Chrome和Firefox）（根据经验）以rgb()格式（而不是十六进制）返回颜色。 无论它们被提供的格式的（ #fff ， white ， hsl(0,100%,100%)所有返回rgb(255,255,255)

就是说，如果您使用css类名，则无需担心在特定颜色之间切换，也不必担心如何补偿特定浏览器返回这些颜色时出现的变化。 例如，在普通的JavaScript中，实现具有相同最终结果的类更改函数非常简单：

function toggleClass(elem, cssClassOn) {
    var test = elem.classList.contains(cssClassOn);
    elem.classList[ test ? 'remove' : 'add' ](cssClassOn);
}

document.getElementById('test').addEventListener('click', function (e) {
    toggleClass(e.target, 'on');
});

JS小提琴演示 。

当然，以上内容需要结合适当的CSS样式。

对于那些未实现Element.classList API的浏览器，一个简单的替代方法是：

function toggleClass(elem, cssClassOn) {
    var currentClasses = elem.className,
        test = currentClasses.indexOf(cssClassOn) > -1;

    if (test) {
        elem.className = currentClasses.replace(cssClassOn,'');
    }
    else {
        elem.className += currentClasses + ' ' + cssClassOn;
    }
}

JS小提琴演示 。

参考文献：

• Element.classList 。
• Element.className 。
• EventTarget.addEventListener() 。

Answer 4

注意=和==

function changeColor(elem) {
  if (elem.style.backgroundColor == "#5AD9C1" || elem.style.backgroundColor == "transparent") {
    elem.style.backgroundColor = "#66FF66";
  } else if (element.style.backgroundColor == "#66FF66") {
    elem.style.backgroundColor = "#5AD9C1";
  }