如何更改 class 中每个元素的颜色

Question

Let's say I had the following code

<div class="elements">
   <span></span>
   <span></span>
   <span></span>
</div>
<style>
   .span {
      background-color: red;
      width: 50px;
      height: 50px;
   }
</style>

This would produce 3 red squares within the elements div. Would there be a way for me to assign each span element a random colour independent of each other? So when I load the page, one might be yellow, another blue, and the last could be red

Answer 1

to random assign you can use javascript

 function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } document.querySelectorAll('span').forEach(x=>{ x.style.color= getRandomColor(); })

 <div class="elements"> <span>a</span> <span>b</span> <span>c</span> </div> <style> span { width: 50px; height: 50px; } </style>

Answer 2

Use foreach and an array to define your background colors run a function to shuffle the array and find a unique color

 //get the element list using the tag and parent class let spans = document.querySelectorAll('.elements span'); //assign colors to an array let colors = ['red', 'green', 'blue', 'purple', 'orange', 'pink', 'yellow', 'teal'] const randomElement = colors[Math.floor(Math.random() * colors.length)]; //shuffle the array of colors function* shuffle(colors) { var i = colors.length; //run while loop and decrement the array colors while (i--) { //splice using a random number wihtin the array to find unique values yield colors.splice(Math.floor(Math.random() * (i+1)), 1)[0]; } } //redefine the color array by shuffling it var ranCols = shuffle(colors); //iterate over the element list spans.forEach(function(value) { //Assign the style backgroundColor to the element/s value.style.backgroundColor = ranCols.next().value; })

 .span { background-color: red; width: 50px; height: 50px; }

 <div class="elements"> <span>Test</span> <span>Test</span> <span>Test</span> </div>