jQueryでクラス操作：addClass、removeClass、toggleClassなど
2024-04-02
jQueryでクラス名を変更する方法
addClass()メソッドは、要素に1つまたは複数のクラスを追加します。
<div class="box"></div>
$( ".box" ).addClass( "active" ); // "active" クラスを追加
例：クリックで要素にactiveクラスを追加
<button>ボタン</button>
<script>
$( "button" ).click(function() {
$( ".box" ).addClass( "active" );
});
</script>
<div class="box active"></div>
$( ".box" ).removeClass( "active" ); // "active" クラスを削除
<button>ボタン</button>
<script>
$( "button" ).click(function() {
$( ".box" ).removeClass( "active" );
});
</script>
toggleClass()メソッドは、要素にクラスが存在する場合は削除し、存在しない場合は追加します。
<div class="box"></div>
$( ".box" ).toggleClass( "active" ); // "active" クラスが存在する場合は削除、存在しない場合は追加
<button>ボタン</button>
<script>
$( "button" ).click(function() {
$( ".box" ).toggleClass( "active" );
});
</script>
attr()メソッドは、要素の属性値を取得または設定できます。クラス名も属性の一つなので、attr()メソッドを使って変更できます。
<div class="box"></div>
$( ".box" ).attr( "class", "active" ); // クラス名を "active" に設定
例：要素のクラス名を動的に設定
<select>
<option value="box">box</option>
<option value="circle">circle</option>
</select>
<div class="box"></div>
<script>
$( "select" ).change(function() {
var className = $( this ).val();
$( ".box" ).attr( "class", className );
});
</script>
<div class="box"></div>
$( ".box" ).css( "class", "active" ); // クラス名を "active" に設定
<select>
<option value="box">box</option>
<option value="circle">circle</option>
</select>
<div class="box"></div>
<script>
$( "select" ).change(function() {
var className = $( this ).val();
$( ".box" ).css( "class", className );
});
</script>
jQueryを使えば、様々な方法で要素のクラス名を変更できます。状況に応じて適切な方法を選択してください。
補足
- 上記の例では、単一の要素に対してクラス名を変更していますが、複数の要素に対して同時に変更することも可能です。
- クラス名にスペースが含まれている場合は、クォーテーションで囲む必要があります。
<button>ボタン</button>
<div class="box"></div>
<script>
$( "button" ).click(function() {
$( ".box" ).addClass( "active" );
});
</script>
<button>ボタン</button>
<div class="box active"></div>
<script>
$( "button" ).click(function() {
$( ".box" ).removeClass( "active" );
});
</script>
<button>ボタン</button>
<div class="box"></div>
<script>
$( "button" ).click(function() {
$( ".box" ).toggleClass( "active" );
});
</script>
<select>
<option value="box">box</option>
<option value="circle">circle</option>
</select>
<div class="box"></div>
<script>
$( "select" ).change(function() {
var className = $( this ).val();
$( ".box" ).attr( "class", className );
});
</script>
<select>
<option value="box">box</option>
<option value="circle">circle</option>
</select>
<div class="box"></div>
<script>
$( "select" ).change(function() {
var className = $( this ).val();
$( ".box" ).css( "class", className );
});
</script>
上記のサンプルコードは、jQueryを使って要素のクラス名を変更する方法を理解するのに役立ちます。
jQuery以外でクラス名を変更する方法
classListプロパティは、要素のクラス名のリストを取得または設定できます。
<div class="box"></div>
var element = document.querySelector( ".box" );
// クラス名を追加
element.classList.add( "active" );
// クラス名を削除
element.classList.remove( "active" );
// クラス名が存在するかどうかを確認
element.classList.contains( "active" );
// クラス名をすべて削除
element.classList.remove();
<button>ボタン</button>
<div class="box"></div>
<script>
var button = document.querySelector( "button" );
var box = document.querySelector( ".box" );
button.addEventListener( "click", function() {
box.classList.add( "active" );
});
</script>
<button>ボタン</button>
<div class="box active"></div>
<script>
var button = document.querySelector( "button" );
var box = document.querySelector( ".box" );
button.addEventListener( "click", function() {
box.classList.remove( "active" );
});
</script>
<button>ボタン</button>
<div class="box"></div>
<script>
var button = document.querySelector( "button" );
var box = document.querySelector( ".box" );
button.addEventListener( "click", function() {
box.classList.toggle( "active" );
});
</script>
<div class="box"></div>
var element = document.querySelector( ".box" );
// クラス名を設定
element.className = "active";
// クラス名を取得
var className = element.className;
例：クリックで要素のクラス名を変更
<button>ボタン</button>
<div class="box"></div>
<script>
var button = document.querySelector( "button" );
var box = document.querySelector( ".box" );
button.addEventListener( "click", function() {
box.className = "active";
});
</script>
<div class="box"></div>
var element = document.querySelector( ".box" );
// クラス名を設定
element.setAttribute( "class", "active" );
// クラス名を取得
var className = element.getAttribute( "class" );
<button>ボタン</button>
<div class="box"></div>
<script>
var button = document.querySelector( "button" );
var box = document.querySelector( ".box" );
button.addEventListener( "click", function() {
box.setAttribute( "class", "active" );
});
</script>
jquery css
