Question

当我尝试通过点击动态更改文本的颜色时，我似乎没有问题使用style.color =＆＃34; ___＆＃34;但是，这似乎并不适合div的背景颜色。这有什么特别的原因吗？

＆＃13;

var text = document.getElementById("text");

var square = document.getElementById("square");

text.onclick = function() {
  if (this.style.color === "blue") {
    this.style.color = "black";
    console.log("it worked");
  } else {
    this.style.color = "blue";
  }
};

square.onclick = function() {
  if (this.style.backgroundColor === "#ccc") {
    this.style.backgroundColor = "#fff";
  } else {
    this.style.backgroundColor = "#ccc";
  }
};

＆＃13;

#text {
  color: blue;
}
#square {
  height: 50px;
  width: 50px;
  background-color: #ccc;
  transition: all .5s ease;
}

＆＃13;

<p id="text">Test</p>

<div id="square"></div>

＆＃13;

Answer 1

您的代码存在一些问题：

检查元素的style定义时，您正在寻找内联样式，而不是CSS中存储的样式。这就是为什么链接文本在第一次点击时不会从蓝色变为黑色的原因，它实际上首先落入else条件，然后将内联样式设置为蓝色。第一次单击后，已设置内联样式，并且单击工作正常。
您正在检查#ccc，但浏览器正在将其转换为内联样式的rgb(204, 204, 204) - 因此您实际上正在检查#ccc是否等于rgb(204, 204, 204)，他们不是，因此你的颜色永远不会改变。

要检查元素的样式，包括样式表中定义的样式，可以使用getComputedStyle()：

window.getComputedStyle(square,null).getPropertyValue("background-color");

您最好不要使用不同颜色的类，而不是检查内联样式。您可以为类创建语义名称，并根据需要切换到不同的颜色，而无需在JavaScript中检查特定的CSS值。

＆＃13;

var text = document.getElementById("text");
var square = document.getElementById("square");

text.onclick = function() {
  if (this.className === "text-blue") {
    this.className = 'text-black';
  } else {
    this.className = "text-blue";
  }
};

square.onclick = function() {
  if (this.className === "square-grey") {
    this.className = "square-white";
  } else {
    this.className = "square-grey";
  }
};

＆＃13;

#text.text-blue {
  color: blue;
}

#text.text-black {
  color: black;
}

#square {
  height: 50px;
  width: 50px;
  transition: all .5s ease;
}

#square.square-grey {
  background-color: #ccc;
}

#square.square-white {
  background-color: #fff;
}

＆＃13;

<p id="text" class="text-blue">Test</p>

<div id="square" class="square-grey"></div>

＆＃13;

Answer 2

样式将backgroundColor返回到 rgb（204,204,204）并期望和rgb值

Answer 3

您的java脚本以rgb格式返回颜色（backgroundColor：rgb（204,204,204））。

下面的代码可以使用：

var text = document.getElementById("text");

var square = document.getElementById("square");
$(document).ready(function() {
text.onclick = function() {
  if (this.style.color === "blue") {
    this.style.color = "black";
    console.log("it worked");
  } else {
    this.style.color = "blue";
  }
};

square.onclick = function() {
  if (this.style.backgroundColor == "rgb(204, 204, 204)") {
    this.style.backgroundColor = "#fff";
     console.log("div worked");
  } else {
    this.style.backgroundColor = "#ccc";
  }
};
  });

#text {
  color: blue;
}
#square {
  height: 50px;
  width: 50px;
  background-color: #ccc;
  transition: all .5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">Test</p>

<div id="square"></div>

Answer 4

问题是，即使您将rgb()值（在本例中为hex）提供给backgroundColor，JavaScript也会将颜色设置为#ccc。有两种方法可以解决这个问题

检查rgb（）而不是hex

＆＃13;

var text = document.getElementById("text");

var square = document.getElementById("square");

text.onclick = function()
{
    if(this.style.color === "blue")
    {
        this.style.color = "black";
        console.log("it worked");
    } else
    {
        this.style.color = "blue";
    }
};

square.onclick = function()
{
    if(this.style.backgroundColor === "rgb(204, 204, 204)")
    {
        this.style.backgroundColor = "#fff";
    } else
    {
        this.style.backgroundColor = "#ccc";
    }
};

＆＃13;

#text
{
    color: blue;
}

#square
{
    height: 50px;
    width: 50px;
    background-color: #ccc;
    transition: all .5s ease;
}

＆＃13;

<p id="text">Test</p>

<div id="square"></div>

＆＃13;

将获得的rgb（）颜色从this.style.backgroundColor转换为十六进制，并使用if
进行检查
点击此处查看该方法RGB to Hex and Hex to RGB

更改div与Text的bg颜色

4 个答案: