HTMLの条件によって表示方向が切り替わる実装のコードを教えて下さい。
(コードは下記リンクを参照)
【実装したいこと】
・要素①が表示されている時…要素②を表示する
・要素①が表示されていない時…要素②を非表示にする
HTML初心者です。
宜しくお願い致します。
https://docs.google.com/document/d/e/2PACX-1vS3j …
No.1ベストアンサー
- 回答日時:
<script>
let 要素1 = document.querySelector(要素1のセレクタ);
let 要素2 = document.querySelector(要素2のセレクタ);
要素2.style.display = 判断(要素1)? "block": "none";
</script>
非表示にする方法としては、一般には以下のいずれかを使います
https://developer.mozilla.org/ja/docs/Web/CSS/di …
https://developer.mozilla.org/ja/docs/Web/CSS/vi …
https://developer.mozilla.org/ja/docs/Web/API/El …
表示されている、が何を意味しているかによって判断方法は変わります。
ページ内に要素が有るのかで判断
単純に 要素1 が null でなければ OK
要素に適用されているスタイル設定が表示用になっているかで判断
一般的には 要素1 の display が 'none' でなければ OK
参考)
https://developer.mozilla.org/ja/docs/Web/API/Wi …
ページの画面表示範囲に要素が入っているかで判断
イベント処理なので少々面倒
参考)
https://developer.mozilla.org/ja/docs/Web/API/In …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 【GAS】WEBアプリでハイパーリンクを挿入したい 1 2023/03/12 19:20
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- その他(データベース) Q&Aフォームを作成したいのですが、どう設計してよいか分かりません、アドバイスお願い致します。 1 2023/07/27 19:04
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- Excel(エクセル) Excelのマクロについて教えてください。 4 2022/05/31 14:07
- Visual Basic(VBA) Excelのマクロコードについて教えてください。 1 2022/06/19 10:08
- JavaScript [再掲]指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードについて 1 2023/05/10 15:09
- HTML・CSS <a>リンクが飛ばない・・ パソコン初心者です 、本を見ながらHTMLで<a>でコードをかいたのです 6 2022/07/30 20:21
- その他(プログラミング・Web制作) pythonにおける単方向リストの実装について 4 2022/07/13 12:34
- Excel(エクセル) 【マクロ】リボン、行列、数式・ステータスバを非表示に 4 2022/12/12 07:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
textareaの幅を画面と合わせたい
-
C言語線形リストの問題です
-
タグは大文字と小文字どちらが...
-
【ヒトの神秘】美男美女から何...
-
input type="hidden"で取得した...
-
取消し線に色を付ける
-
超音波で洗脳。
-
CSS:overflow要素の印刷について
-
<textarea>に<pre>を使うと・・・
-
質問1.
-
角丸画像の背景色を透明にした...
-
ある要素の中身を全部グレーア...
-
smallにtext-allignが効かない
-
imgタグをそのまま使うことは正...
-
HTMLページ上でiframeを最前面...
-
aの中にspan
-
「にはとって代わることのでき...
-
HTMLで <p>~</p>内で2回以...
-
<object>
-
2個のFormを横並びにしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報
https://docs.google.com/document/d/e/2PACX-1vS3j …