「jQuery」CSSのdisplayプロパティでhtml要素の表示、非表示を切り替える
環境
jquery 3.6.0
Google Chrome 103.0.5060.134
構文
1.HTML要素の非表示に設定
$(“#セレクタＩＤ").css(“display", “none");
2.HTML要素の表示に設定
$(“#セレクタID").css(“display", “block");
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#noShow").click(function() {
// HTML要素の非表示に設定
$("#cft").css("display", "none");
});
$("#btnShow").click(function() {
//HTML要素の表示に設定
$("#cft").css("display", "block");
});
});
//-->
</script>
</head>
<body>
<div style="background-color:#dab300; display:inline-flex; align-items:right; ">
<div style="display:inline-block; vertical-align: middle;">
<div id="cft" style="background-color:#f9aa8f; height:60px"> </div>
<input type="button" id="noShow" value="非表示">
<input type="button" id="btnShow" value="表示">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#noShow").click(function() {
// HTML要素の非表示に設定
$("#cft").css("display", "none");
});
$("#btnShow").click(function() {
//HTML要素の表示に設定
$("#cft").css("display", "block");
});
});
//-->
</script>
</head>
<body>
<div style="background-color:#dab300; display:inline-flex; align-items:right; ">
<div style="display:inline-block; vertical-align: middle;">
<div id="cft" style="background-color:#f9aa8f; height:60px"> </div>
<input type="button" id="noShow" value="非表示">
<input type="button" id="btnShow" value="表示">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#noShow").click(function() {
// HTML要素の非表示に設定
$("#cft").css("display", "none");
});
$("#btnShow").click(function() {
//HTML要素の表示に設定
$("#cft").css("display", "block");
});
});
//-->
</script>
</head>
<body>
<div style="background-color:#dab300; display:inline-flex; align-items:right; ">
<div style="display:inline-block; vertical-align: middle;">
<div id="cft" style="background-color:#f9aa8f; height:60px"> </div>
<input type="button" id="noShow" value="非表示">
<input type="button" id="btnShow" value="表示">
</div>
</div>
</body>
</html>
結果
「非表示」ボタンを押下してhtml要素を非表示します。
「表示」ボタンを押下してhtml要素を表示します。
「非表示」ボタンを押下してhtml要素を非表示します。
「表示」ボタンを押下してhtml要素を表示します。
「非表示」ボタンを押下してhtml要素を非表示します。 「表示」ボタンを押下してhtml要素を表示します。