Изменение свойства стиля кнопками

Question

Есть transform: scale

table#pixel_canvas {
    transform: scale(1);
}

Как можно реализовать изменение scale(1) по нажатию на кнопки (+ & -) с шагом в 0.1 ?

Answer 1

Я реализовал это данным образом:

let size = 1
const step = 0.1
const block = document.querySelector('div')

document.querySelector('#minus').addEventListener('click', () => {
  size -= step;
  block.style.transform = `scale(${size})`
})

document.querySelector('#plus').addEventListener('click', () => {
  size += step;
  block.style.transform = `scale(${size})`
})

div {
  width: 200px;
  height: 200px;
  background-color: red;
  transform-origin: left top;
}

<button id="plus">+</button>
<button id="minus">-</button>
<br><br><br>
<div></div>

codepen

Answer 2

Оставлю этот "хитрый костыль" здесь. Не ответа ради, а варианта для:

const oTable = document.querySelector("#pixel_canvas");
document.addEventListener("keypress", (event) => {
  let keyCode = event.keyCode;
  let input = oTable.nextElementSibling;
  if (Math.abs(keyCode - 44) === 1) {
    keyCode - 44 < 0 ? input.stepUp() : input.stepDown();
    input.dispatchEvent(new Event("input"));
  }
});

table#pixel_canvas { transform-origin: 0 0; border: 1px dotted blue; }
table#pixel_canvas th { border: 1px dotted red; }
table#pixel_canvas + input { display: none; }

<table id="pixel_canvas">
  <tr><th>Жмём</th><th>на</th><th>клаве</th></tr>
  <tr><th>+</th><th>и</th><th>-</th></tr>
</table>
<input type="number" value="1" min="1" step="0.1" oninput="this.previousElementSibling.style.transform = `scale(${this.value})`;">

Не забываем дать фокус предпросмотру.

БЛОГ НА HUSL

Изменение свойства стиля кнопками

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