【JavaScript】指定した要素にstyleを付け加えたい|classListのメソッドまとめ

JavaScriptでは、指定した要素に対して、CSSで作ったclassのstyleを付け加えることも可能です。

classのstyleを付け加えるには、

対象の要素.classList.add('追加するstyleのclass名');

をJavaScriptのfunctionに付け加えるだけでOK。

前回のコードを使うと、以下のようなものを作ることができます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<body>
  <div class="box" id="target">★
  </div>
</body>

CSS

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
  cursor: pointer;
  transition: 0.8s;　★ <!--CSSアニメーションの1つ。変化する秒数を指定できる。-->
}

.circle{
  border-radius: 50%;
  background-color: pink;
  transform: rotate(360deg);　★ <!--CSSアニメーションの1つ。要素を回転して表示。引数には回転する角度を指定。-->
}

JavaScript

'use strict';

document.getElementById('target').addEventListener('click',function(){
  document.getElementById('target').classList.add('circle');　★
})

classListの後のメソッドについて

上記では、

対象の要素.classList.add('追加するstyleのclass名');

と、classListの後に「add」というメソッドを付け加えましたが、こちらも色々な種類があります。
以下まとめ。

メソッド名	挙動
add( String [, String [, ...]] )	指定されたクラスの値を追加します。クラスがすでに要素の class 属性に存在した場合は、無視されます。
remove( String [, String [, ...]] )	指定されたクラスの値を除去します。
item( Number )	コレクション内の序数で指定してクラスの値を返します。
toggle( String [, force] )	引数が一つだけの場合は、クラスの値を切り替えます。つまり、クラスが存在すればそれを除去して false を返し、存在しなければ追加して true を返します。二番目の引数が存在する場合は、二番目の引数が true と評価される場合は、クラスの値を追加し、値が false と評価される場合は、除去します。二番目の引数が存在する場合は、二番目の引数が true と評価される場合は、クラスの値を追加し、値が false と評価される場合は、除去します。
contains( String )	指定されたクラスの値が要素の class 属性に存在するかどうかを確認します。
replace( oldClass, newClass )	既存のクラスを新しいクラスで置き換えます。

引用：
Element.classList - Web API | MDN