<!DOCTYPE html>
<html>
<head>
<style>
:root { --principal-color:#ff0000;
--principal-padding:10px;
--border:dotted;
}
p { color: var(--principal-color);
}
div { color: var(--principal-color);
border: 1px var(--principal-color) var(--border);
padding: var(--principal-padding);
}
.button { border-color: var(--principal-color);
}
</style>
</head>
<body>
<p>texto en una P</p>
<div>texto en un DIV</div>
<br><input type="button" class="button" value="pulsa para cambiar el color">
</body>
</html>
<script>
document.querySelector("input[class=button]").addEventListener("click",cambioColor);function cambioColor() { // Añadimos al final de la cabecera un nuevo estilo con la definición de las variables
// de esta manera, el documento cambiara con los nuevos estilos
const head = document.head || document.getElementsByTagName('head')[0]; const style = document.createElement('style');
let css = document.createTextNode(":root{--principal-color:#ff0000;--border:dotted;}"); if(window.getComputedStyle(document.querySelector("p")).color=="rgb(255, 0, 0)") { css = document.createTextNode(":root{--principal-color:#0000ff;--border:solid;}"); }
style.type = 'text/css';
style.appendChild(css);
head.appendChild(style);
}
</script>
Comentarios sobre la versión: 1 (2)