jQueryでclassの設定・変更・削除をする方法【サンプル有】

2019年7月13日2019年8月4日

jQueryで、classの操作についてまとめました。

要素にclassを追加する.addClass()

要素にクラスを追加する場合は、

$('.test').addClass('red-text');

と書きます。

addClassの中に、追加したいクラスを設定してください。

セレクタの指定ではないため、誤って先頭にドット(.)を付けないように注意してください。

//正しい
$('.test').addClass('red-text');

//間違い
$('.test').addClass('.red-text');

<style>
.red-text{
    color: red;
}
</style>
<p class="ex01">.red-textを適用させて、この文字を赤くします。</p>

<script>
$(function(){
    $('.ex01').addClass('red-text');
});
</script>

要素のクラスを削除する.removeClass()

要素のクラスを削除する場合は、

$('.test').removeClass('red-text');

と書きます。

<style>
.red-text{
    color: red;
}
</style>
<p class="ex02 red-text">.red-textを外し、この文字色をデフォルトに戻します。</p>

<script>
$(function(){
    $('.ex02').removeClass('red-text');
});
</script>

要素が特定のクラスの有無を確認する.hasClass()

要素が特定のクラスを持っているか確認したい場合は、.hasClass()メソッドで確認できます。

if($('.test').hasClass('red-text')){
    //.testがred-textを持っている場合の処理
}

主に条件分岐と併せて使用することが多くなると思います。

<p class="ex03 red-text">.red-textがあるpタグ</p>
<p class="ex13">.red-textがないpタグ</p>

<script>
$(function(){
    if( $('.ex03').hasClass('red-text') ){
        console.log('red-textクラスを持っています。');
    }else{
        console.log('red-textクラスを持っていません。');
    }
    if( $('.ex13').hasClass('red-text') ){
        console.log('red-textクラスを持っています。');
    }else{
        console.log('red-textクラスを持っていません。');
    }
});
</script>

参考 console.log()の使い方

要素に指定のクラスを持っていれば削除、持っていなければ付与する.toggleClass()

要素に対して、特定のクラスの切り替えを行いたい場合は、toggleClass()を使用します。

$('.test').toggleClass('red-text');

指定のクラスを持っていれば削除、持っていなければ付与を行います。

<style>
.red-text{
    color: red;
}
</style>
<p class="ex04">切り替え用テキスト</p>
<input type="button" class="ex04_btn" value="red-textクラスを切り替える">

<script>
$(function(){
    //ボタンを押すとtoogleClassを実行する
    $('.ex04_btn').click(function(){
        $('.ex04').toggleClass('red-text');
    });
});
</script>

【応用編】特定の要素に対する表示・非表示ボタンを作成する

toggleClass()とhasClass()を使用して、要素の表示・非表示を切り替えるボタンを作成してみました。

jQueryにおける、class操作の活用例の1つとして、一度触ってみてください。

<style>
/* ボタンデザイン（表示時） */
.ex05-btn{
    background-color: #FFF;
    color: #000;
    text-align: center;
    padding: 5px 10px;
    width: 100%;
    font-size: 18px;
    border: 1px solid #000;
    cursor: pointer;
}
.ex05-btn:before{
    content: '▼表示する';
}
.ex05-btn.show{
    background-color: #000;
    color: #FFF;
}
.ex05-btn.show:before{
    content: '▲元に戻す';
}
.ex05-div-area{
    display: none;
    box-sizing: border-box;
    padding: 10px;
    background-color: #CCC;
    border: 1px solid #000;
}
</style>
<button type="button" class="ex05-btn"></button>
<div class="ex05-div-area">
    ボタンで切り替える、表示・非表示エリアです。
</div>
<script>
$(function(){
    $('.ex05-btn').click(function(){
        //.showクラスを切り替える
        $('.ex05-btn').toggleClass('show');
        //showクラスを持っていれば、ex05-div-areaを表示、持っていなければ非表示
        if($('.ex05-btn').hasClass('show')){
            $('.ex05-div-area').show();
        }else{
            $('.ex05-div-area').hide();
        }
    });
});
</script>

以上、jQueryでclassの設定・変更・削除をする方法、でした。