JavaScriptで文字の拡大縮小

はじめに

JavaScriptの学習にHTMLのリンク文字に拡大縮小の機能を作りました。
忘れるときのため、メモを取ることにしました。

コード

JavaScript

const links = document.querySelectorAll('.navlink');

links.forEach(link => {
  link.addEventListener('mouseover', () => {
    link.style.fontSize = '1.2rem';
    link.style.color = '#3db';
  });

  link.addEventListener('mouseout', () => {
    link.style.fontSize = '1rem';
    link.style.color = '#432';
  });
});

HTML

<nav>
  <ul class="main-nav">
    <li><a href="#nav1" class="navlink">デイトラとは</a></li>
    <li><a href="#nav2" class="navlink">コース一覧</a></li>
    <li><a href="#nav3" class="navlink">お問い合わせ</a></li>
  </ul>
</nav>

CSS

.navlink {
  color: #432;
  font-size: 1rem;
}
.navlink:hover { //削除
  color: #3bd; //削除
  font-size: 1.2rem; //削除
} //削除

説明

const linksという定数を作ります。
document.querySelectorAll('.navlink')の返り値をLinksに代入します。
querySelectorAll(): 指定されたCSSセレクターと同じHTMLの要素のリストを静的なNodeListを返します。
links.forEach: ForEach文を使って、links内格納した配列を取得する。
link.addEventListener: addEventListenerによるターゲット(マウスを重なった時)の特定と呼び出し。
link.style.fontSize: styleプロパティのfontSize属性値？を変更する。
link.style.color: styleプロパティのcolor(文字色)属性値？を変更する。
以下のコードは上記と同じマウスが離れた時の指定です。