「jQuery」.cssでCSSスタイル値を設定するサンプル

2022年2月28日

環境
jQuery3.6.0
Google Chrome 98.0.4758.102

書式
1.$(“セレクタ名").css(“background-color", “値");
CSSスタイルの値を設定します。
2.res = $(“#username").css(“background-color");
CSSスタイルの値を取得します。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  $('#btnSet').click(function(event){
    //背景色を赤色にする
    $("#username").css("background-color", "red");
  });
 
  $('#btnGet').click(function(event){
    //id="username"の背景色を取得してアラート表示する
    var res = $("#username").css("background-color");
    alert(res);
  });
});
</script>
</head>
<body>
  <input type="text" id="username">
  <p><input type="button" id="btnSet" value="CSS設定"></p>
  <p><input type="button" id="btnGet" value="CSS取得"></p>
</body>
</html>

実行結果
「CSS設定」ボタンを押すとテキストボックスの背景色を赤色にします。
「CSS取得」ボタンを押すとテキストボックスの背景色を取得してrgb(255, 0, 0)アラートで表示します。

jQuery

Posted by arkgame