如何切换文本颜色？

Question

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

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

CSS

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

JS

$("#btn").click(function(){
    $('#logoup').toggleClass('greened');
});

无法正常工作。控制台为空。

jsfiddle

- qadenza

Answer 1

在CSS中，id定义的样式优先于class定义的样式。您可以将class名称简单地附加到id上来解决这个问题，而不需要使用! important，后者只应作为最后的手段：JS Fiddle。

#logoup.greened {
  color: green;
}

- Derek Story

---

这使用CSS优先级; 您还可以通过执行以下操作使类保持通用：#logoup.greened, .greened { ... } - vol7ron

Answer 2

您可以在 绿色 上使用 important，或者您可以使用类来控制着色，而不是应用于元素本身。

方法1：在已设置为“绿色”的类上使用important！

$("#btn").click(function() {
  $('#logoup').toggleClass('greened');
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

方法二：不要将颜色应用于ID，使用类

$("#btn").click(function() {
  $('#logoup').toggleClass('red green');
});

.red {
  color: red;
}
.green {
  color: green;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- vol7ron

---

我建议除非确实必要，否则避免使用!important。这会导致灵活性降低，但可以轻松解决此问题。[何时使用! important]（https://css-tricks.com/when-using-important-is-the-right-choice/） - Derek Story

我同意Derek的观点，使用!important会导致许多问题。他提出的解决方案是提高CSS的特异性，从而避免使用!important；然而，我更喜欢上述的第二种方法，即切换类。如果您正在寻找更语义化的内容，可以考虑使用类名，例如“default”和“active”，这些类名可能包含不同程度的样式（不仅仅是颜色）。 - vol7ron

同意。避免使用!important。相反，使用#logoutp.greened来正确覆盖。 - KCarnaille

Answer 3

id 的 CSS 特异性比 class 更高。因此，class 无法覆盖由 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>

JSFIDDLE

- brk

---

你能否在设置了div规则后，用js覆盖它们？当我执行document.getElementsById(strId).style.color = colorOn;一旦设置了strId的颜色，就无法将其设置为其他任何颜色。document.getElementsById(strId).style.color = colorOff;没有任何效果，并且我在控制台中看到colorOn和colorOff的颜色与按钮的背景颜色不同。 - Zypps987

Answer 4

当你使用 id 而不是 class 时，你必须记住 CSS 规则的优先级。具有最高 CSS 特异性的样式会被应用。不同元素的特异性定义如下：

ID attribute = 100
Class attribute = 10
Element = 1

要检查这个，请重新编写您的CSS：

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

阅读关于CSS规则优先级。

- Farkhat Mikhalko

Answer 5

选择器优先级。使用!important;覆盖它。

$("#btn").click(function() {
  $('#logoup').toggleClass('greened');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>

- Iceman