如何在 html 和 javascript 中同时切换文本和颜色？答案

【问题标题】：How do I toggle text and colour together in html and javascript?如何在 html 和 javascript 中同时切换文本和颜色？
【发布时间】：2020-02-08 06:22:15
【问题描述】：

我想切换文本字符串中的某些单词。我想要切换单词（在我的示例中在红色和绿色之间） - 我可以做到这一点没问题。但我也希望颜色与单词匹配，并随着单词的变化从红色变为绿色。谢谢大家的帮助:-)

这是我切换单词的代码：

<!DOCTYPE html>
<html lang="en">

<body> 
<div>
<p  style="font-size:30px">

<span>I want to toggle (and change colour) Red and Green:</span>
<span class="ISHide" onclick="toggle1(this)"><a href="#" >RED</a></span>

</p>
</div>
<script type="text/javascript">
function toggle1 (t1) {
if (t1.childNodes[0].innerHTML == "RED") {
    t1.childNodes[0].innerHTML = "GREEN";
} else {
    t1.childNodes[0].innerHTML = "RED"; 
}
}
</script>

</body>
</html>

【问题讨论】：

t1.childNodes[0].style.color = "red"
你缺少</div>，你能提供你的.css吗？
这是一个没有内联代码的版本：jsfiddle.net/khrismuc/rucbw6k2
我不需要 css。我刚刚看到你有一个名为 ISHide 的 css 类，我想看看它，这样我就可以看到完整的代码。但它不需要解决您的问题
@Michael 我已经更新了我的答案，向您展示了一种解决问题的 JavaScript 方法和一种 JQuery 方法

标签： javascript html text colors toggle

【解决方案1】：

如果您希望将您的功能保持在纯 JavaScript 级别，并且不更改太多原始代码：

只需在您的 if 语句中添加 t1.childNodes[0].style.color = "GREEN";。

和t1.childNodes[0].style.color = "RED"; 在您的else 声明中。

jsfiddle：https://jsfiddle.net/sL4gabvr/

或者如果你想在你的代码中加入一些 JQuery 来让你的解决方案切换文字和颜色：

我已将您的 onlick 更改为 JQuery 点击选择器，并为您的 a 提供了一个 id 属性。

Jsfiddle：https://jsfiddle.net/snqhk8Lj/

我尽量不对您的代码进行太多更改，同时仍使其清晰易读并希望易于理解。

【讨论】：