Почему не применяется стиль с помощь js?

Question

Есть конструктция JS:

document.querySelector('#input-otverstie-diametr').addEventListener('input', kevt => { 
    
    document.querySelector('#show-otverstie').style.width = kevt.target.value + 'px'; // высота отверстия
    document.querySelector('#show-otverstie').style.height = kevt.target.value + 'px'; // ширина отверстия
    document.querySelector('#show-otverstie').style.transform = 'translateX(9px) translateY(9px)';
})

Есть объект:

<div id="show-otverstie"></div>

Стиль width и height применяется, а transform не добавляется. Как сделать, чтобы transform добавлялся?

Answer 1

Потому что вы не меняете значения, а всегда подставляете 9px:

document.querySelector('#input-otverstie-diametr').addEventListener('input', kevt => {

  document.querySelector('#show-otverstie').style.width = kevt.target.value + 'px'; // высота отверстия
  document.querySelector('#show-otverstie').style.height = kevt.target.value + 'px'; // ширина отверстия
  document.querySelector('#show-otverstie').style.transform = `translate(${kevt.target.value}px, ${kevt.target.value}px)`;
  
})

body {
  background-color: #777;
}

#show-otverstie {
  background-color: red;
}

<input id="input-otverstie-diametr" />
<div id="show-otverstie"></div>

БЛОГ НА HUSL

Почему не применяется стиль с помощь js?

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