Как сделать взаимосвязь стиля одного элемента от другого?

Доброго времени суток!

Есть элемент box, нужно взять у него стиль и присвоить другому элементу box_2. Господа, подскажите как быть?

<div class="box" style="background-image: -webkit-linear-gradient(135deg,rgb(78,130,141) 0%,rgb(24,28,31) 75%);background-image: linear-gradient(135deg,rgb(78,130,141) 0%,rgb(24,28,31) 75%);"></div> <div class="box_2"</div>

Заранее благодарю за помощь!


Ответы (1 шт):

Автор решения: Денис Степанов

function copyInlineStyle(from, to) {
  to.setAttribute("style", from.getAttribute("style"));
}

const fromBoxToBox2 = copyInlineStyle.bind(
  null,
  document.querySelector(".box"),
  document.querySelector(".box_2")
)

document.querySelector(".copy_btn").addEventListener('click', fromBoxToBox2);
body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

.box, .box_2{
  height: 50px;
  border: 1px solid rgb(48,40,141);
}
<div class="box" style="background-image: -webkit-linear-gradient(135deg,rgb(78,130,141) 0%,rgb(24,28,31) 75%);background-image: linear-gradient(135deg,rgb(78,130,141) 0%,rgb(24,28,31) 75%);"></div>
<div class="box_2"> </div>

<button class="copy_btn">копировать стиль</button>

→ Ссылка