JavaScript styleのdisplayを変更して要素の表示(非表示)を切り替えるサンプル

2022年12月29日

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

JavaScript

Posted by arkgame

関連記事: