JavaScript

[JavaScript] ブラウザ上の要素の表示/非表示を切替える(非表示時は詰まる)

投稿日:2016年10月2日 更新日:

ブラウザ表示上の指定した箇所の表示/非表示を切り替えるサンプルです。
非表示時は表示領域が詰まって表示されます。

サンプルソース

例)ボタンを押す毎にid="target"の要素の表示/非表示を切り替える

実行サンプル

ボタンを押すと、黄色い枠の部分の表示/非表示が切り替わります。


表示切替領域

解説

  • style.displayで表示/非表示を切替えるこの方法だと、非表示した場合にもともとあった領域が無くなって表示されます。(非表示にした部分は詰まって表示されます。)
  • 非表示にしたときに領域を保持しておきたい場合は、style.visibilityを使用します。
    詳しくは「ブラウザ上の要素の表示/非表示を切替える(非表示時も詰まらない)」をご覧ください。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] 文字に下線/上線/取消し線を引く

JavaScriptで文字に下線/上線/取消し線を引くには、style.textDecorationを使用します。 サン ...

[JavaScript] 半角は1文字、全角は2文字として文字数をカウントする

半角文字は1文字、全角文字は2文字として文字数をカウントするサンプルです。 サンプルソース 例)半角文字は1文字、全角文 ...

[JavaScript] ウィンドウサイズ変更時に処理を行う(onResize)

ウィンドウサイズ変更時に処理を行うには、onResizeイベントハンドラを使用します。 サンプルソース 例)ウィンドウサ ...

[JavaScript] セレクトボックスの選択を位置付ける

セレクトボックスの選択を位置付けるサンプルです。 インデックス番号で位置付ける方法と、value値で位置付ける方法の2種 ...

[JavaScript] ボタンクリックイベントを強制的に起こす

ボタンクリックイベントをJavaScriptから強制的に発生させるには、 ボタンオブジェクトのclick()を呼び出しま ...

スポンサーリンク