JavaScript

jQueryでclassの追加・削除する方法

jQueryを使用して、classを追加したり、削除したりする方法を紹介します。
動的な部分や動きをつけるときにclassを付けたりすると簡単に実装できるので必ず覚えておきたいjQueryの1つです。

jQueryでCSSの追加・変更・削除やclass追加をする方法

では、早速jQueryを使用して動的にCSSの追加や削除を行ってみます。

CSSを追加する

指定の要素にclassを追加します。

$('要素').addClass('class名');

CSSを削除する

指定の要素にclassを削除します。

$('要素').removeClass('class名');

classがあれば削除、なければ追加する

指定の要素に指定の要素に指定のclass名がついていれば削除、なければ追加する方法です。

$('要素').toggleClass('class名');

指定の要素がクリックされたら、指定のclassがあれば削除、なければ追加する

指定する要素に指定のclass名がついていれば削除、ない場合はclassを追加する方法です。

$('要素').click(function(){
  $(this).toggleClass('class名');
});
ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)