勉強したことのメモ

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

  関連記事

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

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

さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...

HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル

あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。 ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...