I want the property of the inputs to be applied and for them to be accumulated, for example if it puts the blue border and the yellow background, that it has a blue border and a yellow background.
Putting back a property that is already defined will remove that property.
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>
You can use the setProperty and removeProperty methods
If the property already exists in the object
parrafo.style
you remove it and if it doesn't exist you add it.Limitations: If you do not put general properties (for example
border
with value1px solid blue
) you have to take into account that you are going to add more than one propertyCSS
(for this example I would put theborder-color
,border-style
, etc.)