スタイルシートを操作する

用語の整理。

See the Pen JavaScript: inline style & class by DriftwoodJP (@DriftwoodJP) on CodePen.

インラインスタイルの適用

element.style – Web API インターフェイス | MDN
要素の style 属性に相当するオブジェクトを返します。

要素ノード.style.スタイルプロパティ名 = 設定値

mouseover – Event reference | MDN

const element1 = document.getElementById('changeStyle');
element1.addEventListener('mouseover', function(){changeStyle(event, 'blue')}, false);
function changeStyle(event, color) {
  let element = event.target;
  element.style.backgroundColor = color;
  setTimeout(() => {
      element.style.backgroundColor = '';
  }, 500);
}

外部スタイルシートの適用

element.className – Web API インターフェイス | MDN
className は要素の class 属性の値の取得 / 設定に用います。

要素ノード.className = 設定値

const element2 = document.getElementById('changeClass');
element2.addEventListener('mouseover', function(){changeClass(event, 'js-highlight')}, false);
function changeClass(event, clazz) {
  let element = event.target;
  element.className = clazz;
  setTimeout(() => {
      element.className = 'js-normal';
  }, 500);
}