1

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>

1 respuesta 1

1

Lo que te está pasando es que cada vez que haces $element.setAttribute('style', '${property}: ${value}px'); estás sobreescribiendo el atributo style por lo que lo que todo lo que hubieses modificado antes al elemento a través de dicho atributo lo vas a perder, quedándose solamente la última modificación. Si quieres evitar eso puedes hacerlo a través de la propiedad .style y de la función setProperty() para poder pasarle unos valores encapsulados en variables.

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.style.setProperty(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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.