カレンダージェネレーターで「今日」に色をつける

ネットショップ向けカレンダージェネレーターというHTMLでカレンダーを作れる便利なサイトがある。

https://kotoritone.com/japanesecalendar/netshop/

「今日をハイライトする」機能がなかったのでchat GPTで追加コードを教えてもらった。

<script>
  // 今日の日付にあたるセルに背景色と文字色を変更する
  var today = new Date();
  var day = today.getDate();
  var cells = document.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    if (cells[i].textContent == day) {
      cells[i].style.backgroundColor = "#FFFFFF";
      cells[i].style.color = "#FF0000";
      break;
    }
  }
</script>

↑これをHTMLの文末に追加。

色の変更

背景色変更は8行目
cells[i].style.backgroundColor = "#FFFFFF";
文字色変更は9行目
cells[i].style.color = "#FF0000";



この記事が気に入ったらサポートをしてみませんか?