Как передать css с одного блока в другой?

Question

[Максим]

Самообучение
Я хочу передать высоту и background в другие блоки расположенные в другом родительском блоке
Имеем .lines и .section
Внутри .sections имеются .section которые должны передать свои css свойства такие как height и background блокам расположеным в .lines а конкретно:
.line0 width и background-color от первого блока .section
.line1 width и background-color от второго блока .section
и так далее

Как же сгенерировать .line и одновременно подставить css ?

Я делал так https://codepen.io/topicstarter/pen/gOdBdLW но тупить стал в тот момент когда надо было вставить в сгенерируемые line${i} стили

Answer 1

[RAX7]

Comments

[Максим]

вот так надо было - я сам справился https://codepen.io/topicstarter/pen/OJoBagy

[RAX7]

Максим, можно и так, просто заинлайнить стили. Правда к чему тогда было:

.line0 width и background-color от первого блока .section
.line1 width и background-color от второго блока .section

непонятно.

[Максим]

RAX7, ну я через Жо объяснил просто - такой вот с меня учитель - сам не знаю и ещё хочу объяснить то что я хочу :))

[Максим]

RAX7, но единственно что я хотел бы узнать - как эту штуку сделать компактно

[RAX7]

Максим, понятно =) но внутренний цикл for(let pr of mass) все же убери, он тут не нужен

[Максим]

RAX7, аааа...мммм .. а как тогда перебрать mass ?

[RAX7]

Максим, никак, он там тоже не нужен

const lines = document.querySelector(".lines");

document.querySelectorAll(".items .item").forEach((el) => {
  const gH = window.getComputedStyle(el).getPropertyValue("height");
  const gB = window.getComputedStyle(el).getPropertyValue("background-color");
  const div = document.createElement("div");
  div.classList.add("line");
  div.style.width = gH;
  div.style.backgroundColor = gB;
  lines.append(div);
});