toggleClass() addClass() removeClass() -jQueryメソッド

なわて投稿サムネイル

〇〇Class()メソッド

1,toggleClass()メソッド
2,addClass()メソッド
3,removeClass()メソッド

1,toggleclass()メソッド

構文

jQueryオブジェクト . toggleClass ( ” クラス名 ” ) ;

詳細

 動作 

引数に指定したCSSクラスが、jQueryオブジェクト内の要素のclass属性に、指定されていなければ追加して、指定されていれば削除する。

 引数 

CSSクラス名

コード例

 HTML 

<button>button</button>

 CSS 

button{
  background-color:brown;
  width:300px;
  height:60px;
}
button.olive{
  background-color:olive;
}

 jQuery 

$("button").click(function(){
  $(this).toggleClass("olive");
});

 実装 

See the Pen
toggleClass
by roymoy (@roymoy)
on CodePen.

2,addClass()メソッド

構文

jQueryオブジェクト . addClass ( ” クラス名 ” ) ;

詳細

 動 作 

引数に指定したCSSクラスをjQueryオブジェクト内の要素のclass属性に追加する。

 引 数 

属性名

3,removeClass()メソッド

構文

jQueryオブジェクト . removeClass ( ” クラス名 ” ) ;

詳細

 動 作 

引数に指定したCSSクラスをjQueryオブジェクト内の要素のclass属性から削除する。

 引 数 

属性名