バニラJavaScriptでdisplay:none/blockの切り替え方法
2024/05/22
指定要素の表示非表示を切り替える場合jQueryだとhide/show使うか、toggleで対応できるがバニラJavaScriptだとどのように記述すればよいのか分からなかったため調べた内容をメモ。
ソースコード
//非表示
document.getElementById("hoge").style.display="block";
//表示
document.getElementById("hoge").style.display="none";
リファレンス
Document.getElementById()
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
HTMLElement: style プロパティ
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style
関連記事
-
-
JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法
jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定 ...
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
JavaScriptでリファラをチェックし、ホスト名と一致するかどうかで分岐処理する方法
ページアクセス時にリファラがホスト名と一致していれば何らかの処理を、一致しない場 ...
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...