个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想切换文本字符串中的某些单词。我希望这些单词能够切换(在我的示例中在红色和绿色之间)-我可以毫无问题地做到这一点。但我也希望颜色与单词相匹配，并随着单词的变化从红色变为绿色。谢谢大家的帮助:-)
这是我切换单词的代码:
<!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>
最佳答案
如果您希望将功能保持在纯 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/
我尝试不对代码进行太多更改，同时仍使其清晰易读并希望易于理解。
关于javascript - 如何在 html 和 javascript 中同时切换文本和颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58329123/
24
4
0
我是一名优秀的程序员,十分优秀！