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

目次

cssメソッドとは

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

 

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

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

ボックス1

 

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

<style>
  #box1 {width: 130px;height: 80px;font-size: 16px;}
</style>
<div id="box1">ボックス1</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つ指定しています。

関連の記事

jQuery CSSのクラスを追加/削除する(addClass)

△上に戻る