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>

附加第二个孩子，更改其颜色，内部html

1 个答案: