jQuery - CSS の設定・取得・削除
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
指定した要素の CSS の設定と取得を行います。
CSS の設定
CSS の取得
CSS の削除(空を設定する)
ちなみに、ハイフン(-)を含むCSSプロパティ名を連想配列で指定する場合は、
ダブルコーテーションかシングルコーテーションで囲うか、
ハイフンを削除して、ハイフンの次の文字を大文字にします。
CSS の設定
$(セレクタ).css(CSSプロパティ名, 値);
$(セレクタ).css({連想配列});
CSS の取得
var css = $(セレクタ).css(CSSプロパティ名);
CSS の削除(空を設定する)
$(セレクタ).css(CSSプロパティ名, '');
ちなみに、ハイフン(-)を含むCSSプロパティ名を連想配列で指定する場合は、
ダブルコーテーションかシングルコーテーションで囲うか、
ハイフンを削除して、ハイフンの次の文字を大文字にします。
"font-size"
fontSize
'background-color'
backgroundColor
2. サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="fruits">
<div id="apple">apple</div>
<div id="orange">orange</div>
<div id="banana" style="border:1px solid blue;">banana</div>
</div>
<!-- Script -->
<script>
$(function(){
//設定
$("#fruits").css("border", "1px solid red");
$("#apple").css({
"font-size" : "1px solid blue",
backgroundColor: "#c0c0ff"
});
//削除
$("#banana").css("border", "");
//取得
console.log( $("#fruits").css("border") );
console.log( $("#apple" ).css("fontSize"));
console.log( $("#apple" ).css("background-color") );
});
</script>
</body></html>
1px solid rgb(255, 0, 0)
16px
rgb(192, 192, 255)
実行結果：画面
