勉強したことのメモ

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

  関連記事

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

郵便番号を入力すると住所を自動で入力してくれる「ajaxzip3」ライブラリの利用方法

お問い合わせフォームのようなページで郵便番号及び住所欄がある場合、ユーザーが郵便 ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法

サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...

クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...