JavaScript styleのdisplayを変更して要素の表示(非表示)を切り替えるサンプル
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122(Official Build) (64 ビット)
構文
1.styleの表示(display)を変更する関数
let 関数名 =(el)=>{
if(el.style.display==="){非表示}
else {表示}
}
2.ボタン要素の取得
let 変数名= document.getElementsByTagname('button’)[0]
3.ボタンのイベント登録
変数名.addEventListener('click’,()=>{関数名(引数)};false)
使用例
<!DOCTYPE html> <html> <body> <style> #cft { width: 100px; height: 100px; background-color: skyblue } </style> <p><button>表示</button> </p> <div id="cft">test1222</div> <script> //ボタン要素を取得する let tt = document.getElementsByTagName('button')[0]; //表示と非表示を切り替える要素を取得する let cft = document.getElementById('cft'); //スタイルのdisplayを変更する関数 let changeEle = (el)=> { if(el.style.display==''){ el.style.display='none'; }else{ el.style.display=''; } } //ボタンクリック時に実行 tt.addEventListener('click', ()=> { changeEle(cft); }, false); </script> </body> </html>
実行結果
「表示」ボタンをクリックするとボックス「cft」の表示・非表示が切り替わります。