勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptでdisplay:none/blockの切り替え方法

   2024/05/22  JavaScript

指定要素の表示非表示を切り替える場合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

  関連記事

formのtextareaに文字を入力した内容をリアルタイムプレビューする方法

textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...

ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...

reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法

reCAPTCHA v2を実装する案件があり以前の記事を参考に組み込んでみたもの ...

Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...

jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法

jQueryのAjaxで何らかのデータをPHP側に送信し、PHP側で当該データを ...