0

Quiero que se aplique la propiedad de los input y que se vayan acumulando, por ejemplo si pone el borde azul y el fondo amarillo, que tenga un borde azul y un fondo amarillo.

Al volver a poner una propiedad que ya esta definida se eliminará esa propiedad.

window.addEventListener("load", function () {
    let cambiar = document.querySelector("#b1");
    let propiedad=document.querySelector("#propiedad");
    let valor=document.querySelector("#valor");
    cambiar.addEventListener("click",function() {cambiarCSS(propiedad.value,valor.value)});
    
    function cambiarCSS() {
      /*???*/
    }   
});
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>

<body>
    Propiedad: <input type="text" id="propiedad" name="propiedad">
    Valor: <input type="text" id="valor" name="valor">
    <button id="b1">Cambiar css</button><br>
    <p id="parrafo">Cambiame</p>
</body>

</html>

1
  • Bienvenido a Stackoverflow. Esto se parece mucho a tu requerimiento, el código controla si la propiedad es válida en CSS mediante CSS.supports. Sólo tendrías que agregar la nueva propiedad en vez de cambiarla.
    – A. Cedano
    Commented el 2 feb. 2019 a las 13:04

1 respuesta 1

0

Puedes utilizar los métodos setProperty y removeProperty

Si la propiedad ya existe en el objeto parrafo.style lo eliminas y si no existe lo añades.

Limitaciones: Si no pones propiedades generales (por ejemplo border con valor 1px solid blue) tienes que tener en cuenta que te va a añadir más de una propiedad CSS (para ese ejemplo te pondría las border-color, border-style, etc.)

window.addEventListener("load", function () {
    let cambiar = document.querySelector("#b1");
    let propiedad=document.querySelector("#propiedad");
    let valor=document.querySelector("#valor");
    cambiar.addEventListener("click",function() {cambiarCSS(propiedad.value,valor.value)});
    
    function cambiarCSS(prop,val) {
      let parrafo = document.getElementById("parrafo");
      
      if(Object.values(parrafo.style).indexOf(prop)>-1){
        parrafo.style.removeProperty(prop);
      }

       parrafo.style.setProperty(prop, val);

    }   
});
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>

<body>
    Propiedad: <input type="text" id="propiedad" name="propiedad">
    Valor: <input type="text" id="valor" name="valor">
    <button id="b1">Cambiar css</button><br>
    <p id="parrafo">Cambiame</p>
</body>

</html>

2
  • Cambiando Object.values(parrafo.style).indexOf(prop)>-1 por parrafo.style[prop]!="" se consigue eliminar la propiedad pero la elimina siempre y no la sobrescribe en caso de que no sea igual.
    – Tiberius
    Commented el 2 feb. 2019 a las 14:23
  • eliminando el else y dejando solo parrafo.style.setProperty(prop, val); es una opcion mas fiable ya que si existe elimina si no solo aplica. con el else evalua y ejecuta haciendo que se deba hacer 2 click en el button para aplicar la segunda vez una propiedad!
    – Bryro
    Commented el 2 feb. 2019 a las 15:01

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.