附加第二个子项，更改其颜色，innerhtml

Question

使用下面的示例，我想更改第二个字母的颜色。

HTML代码包含：

<div class="sideNavLogo" onload="changeColour()">My Wedding Website</div>

Javascript包含：

function changeColour(){
var str = document.getElementById("sideNavLogo").innerHTML;
var result = str.fontcolor("green");
DocumentTimeline.getElementById("sideNavLogo").append;
}

我的"changeColour"函数有很多不同的版本，但都不起作用。这是最新的一个。我更喜欢使用Javascript(而不是jQuery(。

基本上，我想做的是"我的"的第二个字母，即"y"为绿色。

对于那些会质疑"为什么不使用jQuery"的人来说，我更喜欢先掌握基本原理，而不是使用库，并且不知道它的作用。

非常感谢您阅读所有这些！：D其次感谢那些愿意回答的人：(

Answer 1

这是我在评论中提到的解决方案，使用CSS而不是JS:

.sideNavLogo {
font-size: 30px;
}
.sideNavLogo span{
color: #0e0;
}

<div class="sideNavLogo">M<span>y</span> Wedding Website</div>

你没有提到动画，但你的JS看起来可能正在尝试，所以这里有一种CSS方法来做一些简单的动画：

.sideNavLogo {
font-size: 30px;
}
.sideNavLogo span {
color: #0e0;
/* 
This animation will run imediately for 2 seconds
the "forwards" means that it will remain in the 
final state of the animation, e.g. remain green 
*/
animation: colorChange linear 2s forwards;
}
/* The animation we're applying to the span */
@keyframes colorChange {
0% {
color: #000;
}
100% {
color: #0e0;
}
}

<div class="sideNavLogo">M<span>y</span> Wedding Website</div>