<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
:root {
--mi-color:#808080;
}
#cuadro {
border:1px solid;
width:200px;
height:200px;
background-color:var(--mi-color);
}
.texto {
color:var(--mi-color);
}
</style>
</head>
<body>
<p><input type="button" value="Pulsa aquí para cambiar el valor de la variable de CSS --mi-color" onclick="cambioColor()"></p>
<div id="cuadro"></div>
<p class="texto">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen</p>
</body>
</html>
<script>
function cambioColor() {
// cambiamos el valor de la variable CSS --mi-color
document.querySelector("html").style.setProperty('--mi-color', "#f00");
}
</script>
Comentarios sobre la versión: 1 (1)