バニラ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
関連記事
-
-
jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法
GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...
-
-
ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法
他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...
-
-
JavaScriptでテンプレート文字列(テンプレートリテラル)の利用方法
あるJavaScriptのソースコードを拝見した際に変数っぽいのにバッククォート ...
-
-
vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)
vimeoの動画URL(https://vimeo.com/xxxxx)からサム ...
-
-
Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法
Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...