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

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属性から削除する。

 引 数 

属性名

JavaScript・jQueryのおすすめの本

発売日:2018/6/8

JavaScriptの初級向けの本です。基本をわかりやすく丁寧に解説してくれてます。まず第一歩はこちらからの本から。

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く

発売日:2015/12/16

30のLesson形式で実践的なコードを身につける事ができます。図解もあるので大変読みやすいです。jQueryをコードを書きながら覚えたい方におすすめです。

jQuery標準デザイン講座

発売日:2013/11/26

jQueryの基本から実践をわかりやすく解説してくれる良著です。jQueryのリファレンスからそのままサイトで使えるコードを身につけることができます。

jQuery最高の教科書

スポンサードリンク

スポンサードリンク