概要
JQueryでDOMのCSSの追加・変更・削除をするにはcss()メソッドを使う。
スタイルの設定
単一のプロパティー
css()メソッドの1つ目の引数にプロパティー、2つ目の引数に値を文字列で与えて、スタイルを設定する。
また、css()の第1引数だけにプロパティー名を指定すると、スタイルの値が得られる（以下の例では#00fで与えた色の値がrgb(0, 0, 255)で返されている）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JQuery CSS control</title> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(() => { $('#color').css('color', '#00f'); console.log($('#color').css('color')); }); </script> </head> <body> <p id="color">青い文字になる</p> </body> </html> |
|
1 |
rgb(0, 0, 255) |
複数プロパティーの一括設定
css()の引数に連想配列（Object型）を与えて、複数のスタイルを一括指定する。連想配列のキーがプロパティー、値がスタイルの値になる。
複数のスタイルの値を確認するには、css()の引数に配列を与え、その配列の中で必要なスタイルプロパティーを複数指定する。戻り値は連想配列で返される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JQuery CSS multiple styles</title> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(() => { $('#styles').css({ 'color': '#00f', 'font-weight': 'bold', 'text-decoration': 'underline double blue' }); console.log($('#styles').css(['color', 'font-weight', 'text-decoration'])); }); </script> </head> <body> <p id="styles">青い太文字に二重下線</p> </body> </html> |
|
1 2 3 4 |
Object color: "rgb(0, 0, 255)" font-weight: "700" text-decoration: "underline double rgb(0, 0, 255)" |
スタイルの解除
css()の1つ目の引数にプロパティーを指定し、2つ目の引数を空文字列にすると、指定したスタイルが解除される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JQuery CSS remove styles</title> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(() => { $('#styles').css({ 'color': '#00f', 'font-weight': 'bold', 'text-decoration': 'underline double blue' }); $('#styles').css('color', ''); }); </script> </head> <body> <p id="styles">青い太文字に二重下線から青指定を削除</p> </body> </html> |