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

環境
jquery 3.6.0
Google Chrome 103.0.5060.134

構文
1.HTML要素の非表示に設定
$(“#セレクタID").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