如何使用 CSS 和 JavaScript 从数组中选择随机颜色？

任务是使用 CSS 从数组中随机选择一种颜色。仅使用 CSS 无法做到这一点。 CSS 不支持逻辑语句，因为 CSS 纯粹是确定性的(CSS 中没有像数组等那样的东西)。我们可以使用客户端 JavaScript 从数组中随机选择一种颜色。

下面的程序说明了使用客户端 JavaScript 的解决方案：
例子：

  

    
        pick a random color from array
    

  

  
    
        GeeksforGeeks
    
      
    Pick a random color from array
  
    
        Sample Text
    
  
    
  
    
        Click to change color
    
  
    
  
        // 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;
        } 
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

除了上述解决方案，我们还可以使用像 SASS 这样的 CSS 预处理器。即使您使用 SASS，您也必须对样式表进行预处理，这意味着您必须对其进行编译。
要了解有关 SASS 的更多信息，请单击此处。