JavaScript

【js】addClassを使って指定した要素にクラス名を追加する

addClassは指定した要素（pとかhタグとかliとか）にCSSのclass名を追加する時に使います。
HTMLにはCSSを記述する必要がなく、アクション（ボタンをクリックした時とか）後に追加するイメージです。
クリック後に形を変えたい、色を変えたい場合に使う事ができます。

addClassを使った動きのイメージ動画

元の背景色「オレンジ」になっている要素を、ボタンをクリックする事で青に変更する様に設定します。

HTML一式

HTMLソースとなります。
ボタンをクリックするとliにclass名を追加する様にする為、デフォルトでは何も入っていない状態になります。

<div class="container">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<div class="button">CLICK</div>
</div>

CSS一式

CSSソース一覧になります。
全てのCSSを入れていますが、flexやボタンなどは任意なので説明は必須部分だけにさせていただいます。

説明は後ほど。

/*---------------------------
bodyのCSS
---------------------------*/
body {
  position: relative;
  height: 100vh;
  margin: 0;
  background-color: #d0e6ec;
}

/*---------------------------
containerのCSS
---------------------------*/
.container{
  position: absolute;
	top: 50%;
	left: 50%;
  transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
  text-align: center;
}

/*---------------------------
ulのCSS
---------------------------*/
ul{
  display: flex;
  margin: 0;
  padding: 0;
}

/*---------------------------
liのCSS　※必須なのはこれ！
---------------------------*/
li{
  position: relative;
  list-style: none;
  width:200px;
  height:200px;
  background-color:#f79c00;
  font-size: 5em;
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

li:last-child{
  margin-right: 0;
}

.blue {
	background-color:#1688af;
}

/*---------------------------
ボタンのCSS
---------------------------*/
.button{
  display: inline-block;
  text-align: center;
  width: 150px;
  margin: 40px auto 0;
  border: 2px solid #999;
  background-color: #fff;
  padding: 10px 0;
  border-radius: 10px;
  color: #999;
  font-weight: bold;
}

.button:hover{
  cursor: pointer;
  border: 2px solid #999;
  background-color: #999;
  color: #fff;
}

js一式

jsソース一覧になります。
説明は後ほど。

$(function() {
  $(".button").click(function(){
  	$("li").addClass("blue");
  });
});

CSSの説明

今回はクリックすると背景色が切り替わるので、必須なのはliの背景のみになります。あとはレイアウト上設定しているだけです。
本当に必須な部分を抜粋すると以下になります。

li{
	background-color:#f79c00;
}

.blue {
	background-color:#1688af;
}

デフォルトではliに何も入っていない状態。
ボタンをクリックすると「.blue」が追加され、liに設定している色（オレンジ）が青（.blue）になる様に背景色を設定しておきます。

jsの説明

※jquery動作確認（埋め込み及びCDN設置）必須です。

$(function() {
  $(".button").click(function(){
  	$("li").addClass("blue");
  });
});

jsの動きはこれだけになります。

$(".button").click(function(){

クラス名「button」をクリックしたら

$("li").addClass("blue");

liのクラス名に「blue」を追加。

まとめ

addClassは一方通行のメソッドなので、変化を戻す必要が無い場合のみ使用します。
行き来したい場合はtoggleClassを使う事で追加したり消したりする事もできます。

シェア！

RECOMMENDこちらの記事も人気です。