cssメソッドは、要素のCSSプロパティを取得または設定します。
css
記法
【取得】
$(selector).css(propertyName);
【設定】
$(selector).css(propertyName, value);
============================
selector : 対象の要素を指定するセレクター
propertyName : プロパティ名
value: プロパティ設定値
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cssメソッドについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div id="sample_div" class="example-box">クリックすると色が変わります</div>
<div id="property_display" class="display-box">
背景色は:<span id="bg_color"></span>
</div>
<button id="reset_button" class="reset-button">リセット</button>
<!-- CDN取得 -->
<script src="CDNのURL"></script>
<script src="./main.js"></script>
</body>
</html>
// ページの読み込みが完了
$(function () {
// sample_divがクリックされた時の動作
$("#sample_div").on("click", function () {
// sample_divの背景色を青に変更
$(this).css("background-color", "blue");
// テキストを変更
$(this).text("色が変わりました");
// 変更後の背景色を取得して表示
var bgColor = $(this).css("background-color");
$("#bg_color").text(bgColor);
});
// reset_buttonがクリックされた時の動作
$("#reset_button").on("click", function () {
// sample_divの背景色を元に戻す
$("#sample_div").css("background-color", "red");
// テキストを元に戻す
$("#sample_div").text("クリックすると色が変わります");
// リセット後の背景色を取得して表示
var bgColor = $("#sample_div").css("background-color");
$("#bg_color").text(bgColor);
});
});
.example-box {
width: 300px;
height: 100px;
background-color: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 10px;
}
.reset-button {
display: block;
margin: 10px 0;
padding: 5px 10px;
cursor: pointer;
}
.display-box {
width: 300px;
height: 50px;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
出力結果
クリックすると色が変わります
背景色は: