jQuery CSSの値を設定/取得するサンプル(css)

01. cssメソッド

・cssメソッドとは

・CSSの値を設定/取得するサンプル

cssメソッドとは

$(セレクタ).css("cssのプロパティ" , "値" )

指定したCSSを適用します。
以下はjQueryサイトのcssメソッドのページです。
http://api.jquery.com/css/

CSSの値を設定/取得するサンプル

ボタン1を押すとCSSで背景色を変えます。
ボタン2を押すとCSSで背景色とフォントサイズを変えます(初回のみ)。

ボックス１

上記コードのサンプルです。

<style>
  #box1 {width: 130px;height: 80px;font-size: 16px;}
</style>
<div id="box1">ボックス１</div>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  $("#button1").click(function () {
    $("#box1").css("background-color","SpringGreen");
  });

  $("#button2").click(function () {
    $("#box1").css({
      "background-color": "LightSkyBlue",
      "font-size": "20px",
    });
  });
</script>

11行目は、cssメソッドで背景色を指定しています。
15行目は、背景色とフォントサイズの2つ指定しています。