Как правильно обращаться к элементам при добавление класса?
Нужно сделать вот такое появление блока с фильтрами
Проблема заключается в следующем: как в css прописать, если у блока catalog-filter есть класс active то делать следующие задать кнопке catalog__btn display:none, а кнопке catalog__btn-close display: block, также блоку catalog__wrapper margin-bottom: 50px., прикрепил код html и css:
<div class="catalog__info"> <div class="catalog__wrapper"> <h2 class="catalog__title custom-title">Каталог</h2> <button class="catalog__btn custom-btn">Фильтр</button> <button class="catalog__btn-close" id="catalogBtnClose"> <img src="./../../img/icons/close.svg" alt="Close"> </button> </div> <div class="catalog-filter"> <ul class="catalog-filter__column catalog-filter__face"> <h4 class="catalog-filter__title">Уход для лица</h4> <li class="catalog-filter__item"> <label> <input type="radio"> <span>Крема</span> </label> </li> <li class="catalog-filter__item"> <label> <input type="radio"> <span>Сыворотки</span> </label> </li> </ul> </div> </div> |
<div class="catalog__info"> <div class="catalog__wrapper"> <h2 class="catalog__title custom-title">Каталог</h2> <button class="catalog__btn custom-btn">Фильтр</button> <button class="catalog__btn-close" id="catalogBtnClose"> <img src="./../../img/icons/close.svg" alt="Close"> </button> </div> <div class="catalog-filter"> <ul class="catalog-filter__column catalog-filter__face"> <h4 class="catalog-filter__title">Уход для лица</h4> <li class="catalog-filter__item"> <label> <input type="radio"> <span>Крема</span> </label> </li> <li class="catalog-filter__item"> <label> <input type="radio"> <span>Сыворотки</span> </label> </li> </ul> </div> </div>
.catalog-filter { display: flex; justify-content: center; align-items: flex-start; gap: 80px; transform: scale(0); height: 0; overflow: hidden; transition: transform 0.5s ease-in; } .catalog-filter.active { min-height: 316px; transform: scale(1); overflow: unset; } .catalog-filter.active + .catalog__wrapper .catalog__btn { display: none; } .catalog-filter.active + .catalog__wrapper .catalog__btn-close { display: block; } .catalog-filter.active + .catalog__wrapper { margin-bottom: 50px; } |
.catalog-filter { display: flex; justify-content: center; align-items: flex-start; gap: 80px; transform: scale(0); height: 0; overflow: hidden; transition: transform 0.5s ease-in; } .catalog-filter.active { min-height: 316px; transform: scale(1); overflow: unset; } .catalog-filter.active + .catalog__wrapper .catalog__btn { display: none; } .catalog-filter.active + .catalog__wrapper .catalog__btn-close { display: block; } .catalog-filter.active + .catalog__wrapper { margin-bottom: 50px; }
Дополнительно:
если у блока catalog-filter есть класс active то делать следующие
Какие следующие? Что делать?
.catalog__info:has(.catalog-filter.active) > .catalog__wrapper { margin-bottom: 50px; } .catalog__info:has(.catalog-filter.active) > .catalog__wrapper > .catalog__btn { display: none; } .catalog__info:has(.catalog-filter.active) > .catalog__wrapper > .catalog__btn-close { display: block; } |
.catalog__info:has(.catalog-filter.active) > .catalog__wrapper { margin-bottom: 50px; } .catalog__info:has(.catalog-filter.active) > .catalog__wrapper > .catalog__btn { display: none; } .catalog__info:has(.catalog-filter.active) > .catalog__wrapper > .catalog__btn-close { display: block; }
1. Совсем банальный: вешайте класс на родительский блок.
2. Через :has
.catalog__info:has(.catalog-filter.active) .catalog__wrapper { margin-bottom: 50px; } .catalog__info:has(.catalog-filter.active) .catalog__btn { display: none; } |
.catalog__info:has(.catalog-filter.active) .catalog__wrapper { margin-bottom: 50px; } .catalog__info:has(.catalog-filter.active) .catalog__btn { display: none; }
3. Самый интересный: с помощью кастомных свойств.
.catalog-filter { --open-btn-display: block; --margin: 0; } .catalog-filter.active { --open-btn-display: none; --margin: 50px; } .catalog__wrapper { margin-bottom: var(--margin); } .catalog__btn { display: var(--open-btn-display); } |
.catalog-filter { --open-btn-display: block; --margin: 0; } .catalog-filter.active { --open-btn-display: none; --margin: 50px; } .catalog__wrapper { margin-bottom: var(--margin); } .catalog__btn { display: var(--open-btn-display); }
p.s. Зачем вам две кнопки, если они в одном месте в разметке, я не придумала. Меняете текст и стили и всё. Тогда уж логичнее закрывающую засунуть внутрь всего открываемого блока, тогда и не нужно с ней отдельных манипуляций.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для обращения к элементам и добавления класса в JavaScript можно использовать методы из стандартного API DOM (Document Object Model). Вот несколько способов, как это можно сделать:
1. Через метод `querySelector`:
```html
```
```javascript
let element = document.querySelector('#myElement');
element.classList.add('myClass');
```
2. Через метод `getElementById`:
```html
```
```javascript
let element = document.getElementById('myElement');
element.classList.add('myClass');
```
3. Через метод `getElementsByClassName`:
```html
```
```javascript
let elements = document.getElementsByClassName('myElements');
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add('myClass');
}
```
4. Через метод `getElementsByTagName`:
```html
```
```javascript
let elements = document.getElementsByTagName('div');
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add('myClass');
}
```
5. Через метод `querySelectorAll`:
```html
```
```javascript
let elements = document.querySelectorAll('.myElements');
elements.forEach(element => {
element.classList.add('myClass');
});
```
Эти методы помогут вам обращаться к элементам на странице и добавлять классы к ним в зависимости от вашего конкретного случая использования. Надеюсь, это поможет вам решить вашу проблему!