jQueryではスタイルを指定するのにcssメソッドを使います。
cssメソッドではスタイルのプロパティ名と値を指定しますが、jQueryではDOM要素のスタイルを適用するのに直接スタイルを設定するのではなく、すでに定義されているスタイルのクラスを指定することもできます。
この記事では、スタイルの適用にクラスを指定する方法を紹介します。
目次
スタイルクラスの適用（追加）する
スタイルクラスの適用には、addClassメソッドを使用します。addClassメソッドは、定義されているスタイルクラスを指定したDOM要素に追加することができます。
addClassメソッドの書式（構文）
|
1 2 |
// スタイルクラスの適用 $('セレクタ').addClass('クラス名'); |
addClassメソッドの引数には適用（追加）するスタイルのクラス名を指定します。
クラス名はスペースでつなげて複数指定することもできます。
|
1 2 |
// スタイルクラスの適用 $('セレクタ').addClass('クラス名1 クラス名2'); |
addClassメソッドのサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <title>jQuery CSS</title> <style tyle="text/css"> .sample1 { color: #f00; background-color: #fff0e9; } .sample2 { font-size: 20px; font-weight: bold; } </style> <script type="text/javascript"> $(document).ready(function() { // sample1クラスとsample2クラスのスタイルを適用 $('#element').addClass('sample1 sample2'); window.alert('スタイルクラスを適用しました。'); }); </script> </head> <body> <div> <span id="element"> スタイルクラスを操作するspan要素 </span> </div> </body> </html> |
スタイルクラスの除外（削除）する
スタイルクラスの除外には、removeClassメソッドを使用します。removeClassメソッドは、すでにDOM要素に適用されているスタイルクラスを取り除くことができます。
removeClassメソッドの書式（構文）
|
1 2 |
// スタイルクラスの除外 $('セレクタ').removeClass('クラス名'); |
removeClassメソッドの引数には除外（削除）するスタイルのクラス名を指定します。
クラス名はaddClassメソッドと同様にスペースでつなげて複数指定することもできます。
|
1 2 |
// スタイルクラスの除外 $('セレクタ').removeClass('クラス名1 クラス名2'); |
removeClassメソッドのサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <title>jQuery CSS</title> <style tyle="text/css"> .sample1 { color: #f00; background-color: #fff0e9; } .sample2 { font-size: 20px; font-weight: bold; } </style> <script type="text/javascript"> $(document).ready(function() { // sample1クラスとsample2クラスのスタイルを適用 $('#element').addClass('sample1 sample2'); window.alert('スタイルクラスを適用しました。'); // sample1クラスとsample2クラスのスタイルを除外 $('#element').removeClass('sample1 sample2'); window.alert('スタイルクラスを除外しました。'); }); </script> </head> <body> <div> <span id="element"> スタイルクラスを操作するspan要素 </span> </div> </body> </html> |
スタイルクラスを交互の適用／除外する
スタイルクラスの適用と除外を交互に切り替えるには、toggleClassメソッドを使用します。toggleClassメソッドは、DOM要素に対してスタイルクラスが適用されていなければ適用し、すでに適用されている場合は除外します。
toggleClassメソッドはDOM要素がクリックされた際にスタイルを交互に入れ替えるような処理に適しています。例えばチェックボックスをスタイル（画像やアイコンフォント）で表現する場合にはtoggleClassメソッドを使用することで簡単に実装できます。
toggleClassメソッドの書式（構文）
|
1 2 |
// スタイルクラスの除外 $('セレクタ').toggleClass('クラス名'); |
toggleClassメソッドの引数には適用（追加）／除外（削除）するスタイルのクラス名を指定します。
クラス名はaddClassメソッド、removeClassメソッドと同様にスペースでつなげて複数指定することもできます。
|
1 2 |
// スタイルクラスの除外 $('セレクタ').toggleClass('クラス名1 クラス名2'); |
toggleClassメソッドのサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <title>jQuery CSS</title> <style tyle="text/css"> .sample1 { color: #f00; background-color: #fff0e9; } .sample2 { font-size: 20px; font-weight: bold; } </style> <script type="text/javascript"> $(document).ready(function() { // sample1クラスとsample2クラスのスタイルを適用 $('#element').addClass('sample1 sample2'); window.alert('スタイルクラスを適用しました。'); $('#toggle').click(function() { $('#element').toggleClass('sample1 sample2'); }); }); </script> </head> <body> <div> <span id="element"> スタイルクラスを操作するspan要素 </span> <div> <button id="toggle">ToggleClass</button> </div> </div> </body> </html> |
スタイルクラスが適用されているかどうかを判定する
あるDOM要素にスタイルクラスが適用されているかどうかを判定するには、hasClassメソッドが使用します。hasClassメソッドは、指定したスタイルクラスがDOM要素に適用されている場合はtrueを返します。適用されていなければfalseを返します。
hasClassメソッドは、スタイルクラスの適用によってDOM要素の状態を判断する場合などに使用できます。
hasClassメソッドの書式（構文）
|
1 2 |
// スタイルクラスの除外 const result = $('セレクタ').hasClass('クラス名'); |
toggleClassメソッドの引数には適用（追加）／除外（削除）するスタイルのクラス名を指定します。
クラス名はaddClassメソッド、removeClassメソッド、toggleClassメソッドと同様にスペースでつなげて複数指定することもできます。
|
1 2 |
// スタイルクラスの除外 const result = $('セレクタ').hasClass('クラス名1 クラス名2'); |
hasClassメソッドのサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <title>jQuery CSS</title> <style tyle="text/css"> .sample1 { color: #f00; background-color: #fff0e9; } .sample2 { font-size: 20px; font-weight: bold; } .sample3 { font-style: italic; } </style> <script type="text/javascript"> $(document).ready(function() { // sample1クラスとsample2クラスのスタイルを適用 $('#element').addClass('sample1 sample2'); window.alert('スタイルクラスを適用しました。'); $('#toggle').click(function() { $('#element').toggleClass('sample1 sample2 sample3'); }); $('#has-sample').click(function() { const result = $('#element').hasClass('sample1 sample2'); alert(result); }); $('#has-sample1').click(function() { const result = $('#element').hasClass('sample1'); alert(result); }); $('#has-sample2').click(function() { const result = $('#element').hasClass('sample2'); alert(result); }); $('#has-sample3').click(function() { const result = $('#element').hasClass('sample3'); alert(result); }); $('#has-sample123').click(function() { const result = $('#element').hasClass('sample1 sample2 sample3'); alert(result); }); }); </script> </head> <body> <div> <span id="element"> スタイルクラスを操作するspan要素 </span> <div> <button id="toggle">ToggleClass</button> </div> <div> <button id="has-sample">HasClass Sample</button> <button id="has-sample1">HasClass Sample1</button> <button id="has-sample2">HasClass Sample2</button> <button id="has-sample3">HasClass Sample3</button> <button id="has-sample123">HasClass Sample123</button> </div> </div> </body> </html> |
上記の状態で「Sample」をクリックすると「true」が表示されます。「Sample1」をクリックすると「true」が表示されます。「Sample2」をクリックすると「true」が表示されます。「Sample3」をクリックすると「false」が表示されます。「Sample123」をクリックすると「false」が表示されます。
上記の状態で「Sample」をクリックすると「false」が表示されます。「Sample1」をクリックすると「false」が表示されます。「Sample2」をクリックすると「false」が表示されます。「Sample3」をクリックすると「true」が表示されます。「Sample123」をクリックすると「false」が表示されます。
