javascript - 如何使网页中的文本在特定时间改变颜色？

Question

我想让我的网页上的一些文本在页面加载后大约 2 秒从灰色变为紫色。我需要为此使用 CSS 吗？

谢谢。

标签： javascripthtmlcss

Answer 1

您也可以使用 CSS。但是据我所知，您将需要 JS。

document.addEventListener('DOMContentLoaded', function() {
   // your code here
   setTimeout(function() {
      var el = document.getElementsByClassName('initial_color');
      for (var i = 0, n = el.length; i < n; ++i) {
          var curr = el[i];
          curr.classList.add('changed_color');
      }
      
   }, 2000);
}, false);

.initial_color {
  color: gray;
}

.changed_color {
  color: red !important;
}

<div class="initial_color">
  Hello world
</div>