Javascript 如何切换文本颜色？

我需要切换文本颜色从红色到绿色，反之亦然

<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>

JS

不起作用。控制台是空的

---

当您使用

id

而不是

class

时，您必须记住css规则的优先级。应用具有最高CSS特性的样式。不同元素的特异性定义如下：

ID attribute = 100
Class attribute = 10
Element = 1

要检查此选项，请重写css：

#logoup{
    color:red;
}
.greened{
   color:green!important;
}

---

阅读CSS中的

，id定义的样式优先于类定义的样式。您只需将类名附加到id即可解决此问题，而无需使用

！重要信息

只能作为最后手段使用：

---

选择器优先级。使用

覆盖它！重要的


$（“#btn”）。单击（函数（）{
$（“#登录”）.toggleClass（“绿色”）；
});
.greened{
颜色：绿色！重要；
}
#登入{
颜色：红色；
}

深沉的
单击
id
占据比
类
更高的css特异性。所以类将无法控制由id设置的样式。
以下更改将起作用

CSS

.logoup{    // id changed to class
    color:red;
}
.greened{
   color:green;
}

HTML

<div id="logoup" class="logoup">DEEP</div>
<button id='btn'>CLICK</button>

DEEP
点击

您可以在绿色上使用important，也可以使用类控制颜色，而不是将其应用于元素

方法1：使用
重要信息在绿色类上

$（“#btn”）。单击（函数（）{
$（“#登录”）.toggleClass（“绿色”）；
});
#登录{
颜色：红色；
}
格林先生{
颜色：绿色！重要；
}
DEEP
点击
我建议避免使用
！重要信息
，除非绝对必要。它没有灵活性，没有它就很容易解决。我同意德里克的观点，有太多的例子！重要的问题可能会导致问题。他的解决方案是改进CSS的特殊性，所以
！重要信息
不是必需的；然而，我更喜欢上面的方法2，它交换类。如果你正在寻找一些语义更丰富的东西，你可以考虑使用类名，比如默认和激活，这可能包括不同程度的样式（不仅仅是颜色）。避免使用！重要的。相反，使用#logoutp.greened来正确覆盖；您还可以通过执行：
#logup.greened、.greened{…}
设置好div规则后，是否可以从js中重写它们？当我执行document.getElementsById（strId）.style.color=colorOn时；一旦设置好，我就无法将strId的颜色设置为其他颜色。document.getElementsById（strId）.style.color=colorOff；什么都不做，我在控制台中看到colorOn和colorOff的颜色彼此不同，按钮的背景色也不同。
#logoup.greened {
  color: green;
}

.logoup{    // id changed to class
    color:red;
}
.greened{
   color:green;
}

<div id="logoup" class="logoup">DEEP</div>
<button id='btn'>CLICK</button>