Tengo una serie de inputs
que mandan sus valores a una función para modificar el style
de un elemento. Esto lo hago con el método setAttribute()
el problema es que cada vez que cambia el valor el input
, no se mantiene el estilo anterior que se le asignó en otro input
.
const $allInputs = document.querySelectorAll('input')
const $elemento = document.querySelector('.elemento')
$allInputs.forEach(input => {
input.addEventListener('change', modifyValues)
})
function modifyValues() {
const property = this.getAttribute("data-property")
setCSS($elemento, property, this.value)
}
function setCSS($element, property, value) {
$element.setAttribute('style', `${property}: ${value}px`);
}
.elemento {
width: 300px;
height: 100px;
background: cyan;
}
<input type="number" data-property="height"/>Height
<input type="number" data-property="width"/>Width
<div class="elemento">ELEMENTO</div>