La tarea es elegir un color aleatorio de una array usando CSS. No hay forma de hacer esto usando solo CSS. CSS no admite declaraciones lógicas porque CSS es puramente determinista (no hay nada como una array, etc. en CSS). Podemos usar JavaScript del lado del cliente para seleccionar un color aleatorio de la array.
El programa siguiente ilustra la solución utilizando JavaScript del lado del cliente:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
pick a random color from array
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Pick a random color from array</h3>
<h3 id="pick" style="color:red;">
Sample Text
</h3>
<br><br>
<button onclick="pickColor()">
Click to change color
</button>
<script>
// JavaScript code to pick
// a random color from array
function pickColor() {
// Array containing colors
var colors = [
'#ff0000', '#00ff00', '#0000ff',
'#ff3333', '#ffff00', '#ff6600'
];
// selecting random color
var random_color = colors[Math.floor(
Math.random() * colors.length)];
var x = document.getElementById('pick');
x.style.color = random_color;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Además de la solución anterior, podemos usar preprocesadores CSS como SASS . Incluso si usa SASS, debe preprocesar sus hojas de estilo, lo que significa que debe compilarlas.
Para saber más sobre SASS, haga clic aquí .
Publicación traducida automáticamente
Artículo escrito por Sunitamamgai y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA