@konstantinst13

Почему grid-area через js вставляется несколько раз?

Почему-то через цикл css-свойство grid-area устанавливается несколько раз и оно получается равно: grid-area: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1; (и так с каждым элементом из цикла)

А мне нужно. чтобы grid-area = sales_twin_1;

В чём проблема, как это исправить?

Вот мой скрипт:

const tableArticlesClones = document.querySelectorAll('.twin');
      
       tableArticlesClones.forEach((item, index) => {
           const dataId = item.getAttribute('data-id');
           
          
           item.style.gridArea = dataId; 
            console.log('item.style.gridArea:');
           console.log(item.style.gridArea); //Пишет: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1.
           //т.е. он выдаёт: dataId / dataId / dataId / dataId
           //а мне нужно, чтобы gridArea = sales_twin_1, т.е. gridArea = dataId (и так с каждым dataId)
           
       });


Я решил эту проблему:
Просто нужно устанавливать в JS значение для grid-area через атрибут style.

item.setAttribute('style', `grid-area: ${dataId}`)
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ответы на вопрос 1
sergski
@sergski
web-developer
Потому что grid-area задает положение элемента в сетке по горизонтали и вертикали. Те браузер получает значение dataId, и в соответствии с моделью grid говорит вам -- "помещу этот элемент в 1 колонку и закончу в 1 колонке, помещу 1 строку и закончу в 1 строке".
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 05:21
2000 руб./за проект
28 нояб. 2024, в 05:18
500 руб./за проект
28 нояб. 2024, в 03:51
3500 руб./за проект