みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回はクラスの追加＆削除処理について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- クラスの追加ができる
- クラスの削除ができる
クラスを操作できるようになろう！
クラスを追加する構文
HTML要素.classList.add(クラス名);これでクラスの追加ができるよ！
カンマで区切ると複数のクラス名を追加できるよ！
カンマで区切ると複数のクラス名を追加できるよ！
クラスを削除する構文
HTML要素.classList.remove(クラス名);これでクラスの削除ができるよ！
カンマで区切ると複数のクラス名を削除できるよ！
カンマで区切ると複数のクラス名を削除できるよ！
実際に作ってみよう！
- index.html
- stlye.css
- script.js
を同じフォルダに作成してください。
index.html
<!DOCTYPE html>
<html>
<head>
<!-- 外部のCSSファイルを読み込み -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<button onclick="addClass()">クラスの追加</button>
<button onclick="removeClass()">クラスの削除</button>
<p id="text">このテキストの色が変わります</p>
<!-- 外部のJavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
ボタンのクリック処理とJavaScriptの関数を紐づけているよ！
style.css
/* テキストの色を変えるためのスタイルを定義 */
.text-red {
color: red;
}
script.js
// テキスト要素を取得
const textElement = document.getElementById("text");
// 付与・削除するクラス名
const MY_CLASS_NAME = "text-red";
/**クラス追加処理 */
const addClass = () => {
// 取得した要素にクラスを追加
textElement.classList.add(MY_CLASS_NAME);
};
/**クラス削除処理 */
const removeClass = () => {
// 取得した要素のクラスを削除
textElement.classList.remove(MY_CLASS_NAME);
};クラスの追加＆削除関数を定義しているよ！
ブラウザで確認してみよう！
作成したindex.htmlをChromeで開くとこのようになっているはずです。
クラスの操作ができてえらい！
まとめ
- クラスの追加 element.classList.add(クラス名)
- クラスの削除 element.classList.remove(クラス名)
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
