附加 2nd Child，改变它的颜色，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" 函数有许多不同的版本，但其中 none 有效。这是最新的。我更愿意使用 Javascript（而不是 jQuery）。

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

对于那些会质疑 "why not 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>

附加 2nd Child，改变它的颜色，innerhtml

Append 2nd Child, Change its colour, innerhtml

javascript

innerhtml