jQuery - class の追加・削除
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
指定した要素の class の追加と削除を行います。
属性の設定
属性の削除
属性の設定
$(セレクタ).addClass(クラス名, 値);
属性の削除
$(セレクタ).removeClass(クラス名);
2. サンプル
<div>タグの CSS を動的に設定します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
.error { color: red; }
.info { color: skyblue; }
.waku { border: 1px solid red; }
</style>
<!-- 画面 -->
<div id="fruits">
<div id="apple">apple</div>
<div id="orange">orange</div>
<div id="banana" class="error">banana</div>
</div>
<!-- Script -->
<script>
$(function(){
//追加
$("#apple").addClass("info");
$("#apple").addClass("waku");
//削除
$("#banana").removeClass("error");
//取得
console.log( $("#apple").attr("class") );
});
</script>
</body></html>
info waku
実行結果：画面
