JavaScript

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

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

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

要素の表示/非表示を切替える(非表示時も詰まらない)

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

実行サンプル

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

表示切替領域

解説

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

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

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

関連記事

[JavaScript] セレクトボックスを未選択状態にする

セレクトボックスを未選択状態にするには、selectedIndexに -1 をセットすればOKです。 サンプルソース 例 ...

[JavaScript] チェックを消せるラジオボタン

クリックするとオン、オフができるラジオボタンのサンプルです。 サンプルソース 例)チェックオンのラジオボタンをクリックす ...

[JavaScript] テーブルの行数、列数を取得する

テーブルの行数、列数を取得するにはrows.length、cells.lengthを使用します。 サンプル 例)id=& ...

[JavaScript] 指定した期間内でランダムな日付を返すFunction

指定した期間内でランダムな日付を返すFunctionです。 例えば「2020/01/01~2020/12/31」を指定し ...

[JavaScript] マウスボタン押下/押上イベントを取得する(onMouseDown, onMouseUp)

マウスボタンを押したイベントを取得するにはonmousedown、 押し下げたマウスボタンを離したイベントを取得するには ...

スポンサーリンク