今回はjQueryのCSSのatyle属性に取得・設定・削除について解説していきたいと思います。
それではいってみましょう！
Menu
CSSの設定
➀1つだけ設定する場合
【構文】
1 | $('要素').css('プロパティ', '値'); |
【サンプル】
class属性のsampleにstyle属性を設定して背景色を赤にする例
1 | $('.sample').css('background', 'red'); |
②複数まとめて設定する場合
【構文】
1 | $('要素').css({'プロパティ1':'値','プロパティ2':'値',,,,}); |
【サンプル】
h2要素にstyle属性を複数設定をする例
1 2 3 4 5 6 7 | $('h2').css({ 'font-size': '18px', 'background': 'red', 'position': 'fixed', 'top': '15px', 'left': '15px', }); |
CSSの取得
プロパティの値を取得
【構文】
1 | $('要素').css('プロパティ名') |
【サンプル】
指定した要素（h3）のフォントサイズを取得する例です。
1 2 3 4 5 6 7 | <body> <h3 style="font-size:20px;">サンプルh2</h3> <script> let propName = $('h3').css('font-size'); //プロパティ名を指定 console.log( propName ); </script> </body> |
【結果】
20px
プロパティの値を複数取得
※jQuery1.9以前のバージョンははundefinedで取得できません。
【NG】
1 | <script src="https://code.jquery.com/jquery-1.8.3.js"> |
【OK】
1 | <script src="https://code.jquery.com/jquery-3.2.1.min.js"> |
【構文】
1 | $('要素').css([プロパティ名1,プロパティ名2,,,]) |
【サンプル】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <h3 style="font-size:20px; color:red;">サンプルh2</h3> <script> let objProp = $('h3').css(['color','font-size']); console.log(objProp); //【結果➀】 //{color: "rgb(255, 0, 0)", font-size: "20px"} console.log(objProp.color); //【結果➁】 //rgb(255, 0, 0) console.log(objProp['font-size']); //【結果➂】 //20px </script> </body> |
【結果】
記述方法が複数あります。
➀ objProp → {color: “rgb(255, 0, 0)”, font-size: “20px”}
➁ objProp.color → rgb(255, 0, 0)
➂ objProp[‘font-size’] → 20px
CSSの削除
スタイル属性を削除
【構文】
1 | $('要素').removeAttr('style'); |
【サンプル】
pタグのstyle属性を削除
1 | $('p').removeAttr('style'); |
プロパティを削除
【構文】
1 | $('要素').css({'プロパティ': ''}); |
【サンプル】
クラスsampleの背景色を削除
1 | $('.sample').css({'background': ''}); |
まとめ
jQueryでCSSの設定・取得・削除は非常に簡単でコンパクトに記述できます。
以上です。
