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>
<!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>
<!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」の表示・非表示が切り替わります。