「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要素を表示します。