「jQuery」CSSのdisplayプロパティでhtml要素の表示、非表示を切り替える

2022年7月29日

環境
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>

結果

「非表示」ボタンを押下してhtml要素を非表示します。
「表示」ボタンを押下してhtml要素を表示します。

jQuery

Posted by arkgame

関連記事: