Как сделать, чтобы свойства класса прописывались не DOM-узлу, а классу, создаваемому в JS?

Question

[FavnAristotel]

Когда я выбирают с помощью document.querySelector
и задаю свойства этой переменной и с помощью тогл убираю и добавляю этот класс ,то свойство которое я прописываю применяется к дом узлу а не к классу. Как сделать, чтобы свойство применялось к актив классу, чтобы когда его уберешь
то и свойство пропадало при условии что ширину flex я прописываю в js?

const order = document.querySelectorAll('.item-order');
order.classList.toggle('order-active');
const order_active = document.querySelector('.order-active');
 order_active.style.setProperty('flex', '0 1' + choisenitemwidth + 'px'');

<div class=item-order>

Comments

[Сергей delphinpro]

ничего не понятно, но очень интересно...

[Сергей delphinpro]

const order = document.querySelectorAll('.item-order');
order.classList.toggle('order-active');

Это у вас не будет работать и не работает. В консоль загляните, там ошибка.

[FavnAristotel]

Есть три айтема в каждом из них есть скрытый блок(цена) . при нажатии на плюс который находиться в каждом айтеме
скрытый блок появляется при этом вычисляется ширина айтема с показанным блоком цены.
я хочу добавлять класс актив к блоку на который нажали и его блоку с ценой и скрывать класс при нажатии на другой плюс в другом айтеме .но когда я задаю свойства как описал выше то они записыватсся не на класс который я добавляю а на дом элемент .

[FavnAristotel]

все разобрался сам просто обратился к this . не могу весь код здесь выложить потому что слишком много .

Answer 1

[Сергей delphinpro]

Я нифига не понял, кроме одного.
Чтобы убрать стиль, назначенный из скрипта, нужно присвоить ему пустую строку.

// добавляем стиль
order_active.style.flex = '0 1' + choisenitemwidth + 'px';

// обнуляем
order_active.style.flex = '';

При этом стиль не сбросится полностью – он станет таким, каким прописан в css

Answer 2

[Rsa97]

1. querySelectorAll возвращает не элемент, а коллекцию элементов. У коллекции нет свойства classList. Чтобы изменить класс у всех элементов коллекции, её надо перебирать циклом.

const orders = document.querySelectorAll('.item-order');
orders.forEach((el) => el.classList.toggle('order-active'));

2. Привязка стиля к классу делается в CSS. У DOM-элементов после этого достаточно задать нужный класс. Менять стили у элементов напрямую без особой необходимости не стоит.