0

На странице есть HTML разметка:

<body>
  <div class="page-container">
    <div class="page-content">
      <aside class="sidebar"></aside>
    </div>
  </div>
  <footer class="footer"></footer>
</body>

Примечание: Блока sidebar на странице может и не быть!

Вопрос:

Как вычислить с помощью JavaScript присутствие блока с классом sidebar и в случае обнаружения присвоить класс блоку footer?

3
  • можно это решить css ом 12 авг 2019 в 12:44
  • Этот вариант еще лучше. Подскажите!?
    – verstala
    12 авг 2019 в 12:47
  • 1
    .sidebar ~ .footer {border:solid red;} 12 авг 2019 в 12:49

1 ответ 1

1

*При условии, что у вас только один такой элемент на страницу:

var sidebar = document.querySelector('.page-content .sidebar');
var footer = document.querySelector('.footer');

if( sidebar ){
  footer.classList.add('red');
}
.red { color: red; }
<div class="page-container">
  <div class="page-content">
    <aside class="sidebar"></aside>
  </div>
</div>

<footer class="footer">Тест</footer>

6
  • Это сработает если div идут подряд? А если они еще в разных блоках тогда только JS?
    – verstala
    12 авг 2019 в 13:01
  • Поправил разметку! Вот такая будет, без изменений.
    – verstala
    12 авг 2019 в 13:23
  • @verstala в таком случае всё будет проще) querySelector находит только первый элемент по этому селектору. Т.е. .sidebar где-то внутри .page-content. Если такой элемент будет найден - условие выполнится. 12 авг 2019 в 13:30
  • Средствами css такую разметку не решить?
    – verstala
    12 авг 2019 в 13:31
  • Без вариантов... CSS-селекторы умеют находить или вложенные блоки, или соседние (ниже в коде)... не умеют "выходить" к родителю и от родителя уже искать соседние-вложенные) 12 авг 2019 в 13:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.