HTMLの条件によって表示方向が切り替わる実装のコードを教えて下さい。 （コードは下記リンクを参照）

HTMLの条件によって表示方向が切り替わる実装のコードを教えて下さい。
（コードは下記リンクを参照）

【実装したいこと】

・要素①が表示されている時…要素②を表示する
・要素①が表示されていない時…要素②を非表示にする


HTML初心者です。
宜しくお願い致します。


https://docs.google.com/document/d/e/2PACX-1vS3j …

質問者からの補足コメント

• https://docs.google.com/document/d/e/2PACX-1vS3j …

    補足日時：2022/09/25 14:35

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2022/09/26 15:48

<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 …

この回答へのお礼

とても分かりやすいご回答ありがとうございました。解決できました。

お礼日時：2022/09/28 00:07