Question

我正在创建一个清单，以便在项目完成后，可以单击它并将背景变为“红色”。如果错误地将其标记为“红色”，则可以再次单击它并将背景变为“无”。它在Chrome和Safari中运行良好。在Firefox中，除非您尝试撤消“红色”以使其变为“无”，否则它的效果很好。我怀疑这可能与颜色名称有关而不是特定的值，尽管我在使用FireFox时遇到了问题。这是JS我用来做那个没有＆gt; red-＆gt; none根据需要。

    function onMouseDown(id) {
      var squareColor = document.getElementById(id).style.background;
      if (squareColor === "red") {
        document.getElementById(id).style.background = "none";
        document.getElementById(id).style.color = "black";
      } else {
        document.getElementById(id).style.background = "red";
        document.getElementById(id).style.color = "white";
      }
    }

Answer 1

如果您尝试在Firefox中记录style属性：

console.log(document.getElementById(id).style);

...你会发现它没有background属性。相反，它会分隔backgroundColor，backgroundImage，backgroundSize等中的所有单个参数。这些拆分属性存在于所有浏览器中，因此您可以这样做：

function onMouseDown(id) {
  var square = document.getElementById(id);

  if (square.style.backgroundColor === "red") {
    square.style.background = "none";
    square.style.color = "black";
  } else {
    square.style.background = "red";
    square.style.color = "white";
  }
}

<button id="a" onmousedown="onMouseDown('a')">Click me!</button>

或者，正如评论中所提到的，你可以使用一个更简单的类：

function onMouseDown(id) {
  document.getElementById(id).classList.toggle('red');
}

.red{
  background: red;
  color: white;
}

<button id="a" onmousedown="onMouseDown('a')">Click me!</button>

Answer 2

尝试在if语句中使用红色的Hex颜色代码，而不是写入颜色的名称。祝你好运

Firefox忽略document.getElementById（id）.style.background？

2 个答案: