jQuery cssメソッドでで指定CSSの値を設定する

環境
Windows 10 Home 64bit
jQuery 3.6.3

構文
$(セレクタ).css(“cssのプロパティ" , “値" )
CSSメソッドを使って要素のcssプロパティを変えます

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnConfirm").click(function () {
$("#cft").css("background-color","lightblue");
});
});
</script>
<style>
#cft {width: 150px;height: 60px;font-size: 16px;}
</style>
</head>
<body>
<div id="cft">テスト</div>
<input type="button" id="btnConfirm" value="検証" />
</body>
</html>
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btnConfirm").click(function () { $("#cft").css("background-color","lightblue"); }); }); </script> <style> #cft {width: 150px;height: 60px;font-size: 16px;} </style> </head> <body> <div id="cft">テスト</div> <input type="button" id="btnConfirm" value="検証" /> </body> </html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnConfirm").click(function () {
    $("#cft").css("background-color","lightblue");
  });

});
</script>
<style>
  #cft {width: 150px;height: 60px;font-size: 16px;}
</style>
</head>
<body>

<div id="cft">テスト</div>
<input type="button" id="btnConfirm" value="検証" />

</body>
</html>

結果
ボタン「検証」を押すと、CSSで背景色(lightblue)を変えます

CSS

Posted by arkgame