<input class="mChange" onchange="changeMargin()" type="text">
<div class="block1"></div>
<div class="block2"></div>
.block1 {
width: 150px;
height: 40px;
background-color: aqua;
}
.block2 {
width: 150px;
height: 40px;
background-color: black;
margin-top: 10px;
}
// получаем блок который двигаем
// в данном случае его класс .block2
let block = document.querySelectorAll(".block2")[0]
// как только пользователь ввел и нажал на что-то другое
// срабатывает функция изменения отступа
function changeMargin() {
// получаем значение из инпута
let value = document.querySelectorAll(".mChange")[0].value;
// записываем стили для блока
block.style.marginTop = value + "px"
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.