每个div另一种彩虹色

时间：2019-01-26 13:30:17

标签： javascript html css

我的div元素数量（生成）未知，我想用自己的“彩虹”（背景颜色）设置样式：

DivExample

请帮助我^^

5 个答案:

答案 0 :(得分：0)

var testDivs = document.querySelectorAll('.test');
      var testColors = ['purple', 'blue', 'green', 'orange', 'red'];

      for (let i = 0; i < testDivs.length; i++) {
        testDivs[i].style.backgroundColor = testColors[i];
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div style="width:50px; height:100px; float:left" class="test"></div>
    <div style="width:50px; height:100px; float:left" class="test"></div>
    <div style="width:50px; height:100px; float:left" class="test"></div>
    <div style="width:50px; height:100px; float:left" class="test"></div>
    <div style="width:50px; height:100px; float:left" class="test"></div>
  </body>
</html>

  1. 选择您的元素（在这种情况下，我用querySelectorAll选择了它们。）
  2. 使用您喜欢的颜色初始化数组（本例中为testColors变量）。
  3. 遍历所选元素，并为testColors数组中的每个元素分配颜色。

如果元素的数量未知，则可以在选择它们之后对其进行计数，例如：testDivs.length（本例为5），然后创建与元素长度一样多的颜色。

答案 1 :(得分：0)

您可以在html中为每个块设置样式：

SourceConnector
.block{
  width: 100px;
  height: 200px;
  display: inline-block;
}

您可以根据需要添加任意数量的块。

答案 2 :(得分：0)

我将问题分为两个问题：
首先，您需要获得一个代码，当您说许多元素时，该代码可以创建匹配的颜色。为此，我使用了一个从波长创建颜色代码的代码。这样，您可以轻松地从多个彩色div中创建一个彩虹般的网站。为此，我使用this代码并使用colorSpace[0]。
但是要获得匹配的颜色，我需要计算适当的波长。可见光为450nm至700nm。差异为250nm。因此，例如，如果您具有三个元素，则理想的颜色将是450nm + n * 250nm / 4，n是颜色（1到3）。

function GetLengths(number) {
    var Lengths = [];
    for (i = 0; i < number; i++) {
        var Number = 450 + (i+1)*250/(number+1)
        Lengths.push(Number);
    }
    return Lengths;
}

第二个问题是使div获得这些颜色。也可以使用Javascript来实现：

var Divs = document.getElementsByClassName("WithColor");
var Length = 100/Divs.length
for (i = 0; i < Divs.length; i++) { 
    Divs[i].style.width = Length+"%";
    Divs[i].style.background-color = "here a color";
}

现在，我们必须连接创建波长的代码，将波长变成颜色代码的代码以及将颜色代码提供给div的代码：

var Divs = document.getElementsByClassName("WithColor");
	var TheWaveLengths = GetLengths(Divs.length);
	
	var Length = 100/Divs.length
	for (i = 0; i < Divs.length; i++) {
        var ColorCode = wavelengthToColor(TheWaveLengths[i])[0];
		Divs[i].style.width = Length+"%";
		Divs[i].style.background = ColorCode;
	}
	
	
	function GetLengths(number) {
		var Lengths = [];
		for (i = 0; i < number; i++) {
			var Number = 450 + (i+1)*250/(number+1)
			Lengths.push(Number);
		}
		return Lengths;
	}
	
	function wavelengthToColor(wavelength) {
	        var r,
	            g,
	            b,
	            alpha,
	            colorSpace,
	            wl = wavelength,
	            gamma = 1;
 
 
	        if (wl >= 380 && wl < 440) {
	            R = -1 * (wl - 440) / (440 - 380);
	            G = 0;
	            B = 1;
	       } else if (wl >= 440 && wl < 490) {
	           R = 0;
	           G = (wl - 440) / (490 - 440);
	           B = 1;  
	        } else if (wl >= 490 && wl < 510) {
	            R = 0;
	            G = 1;
	            B = -1 * (wl - 510) / (510 - 490);
	        } else if (wl >= 510 && wl < 580) {
	            R = (wl - 510) / (580 - 510);
	            G = 1;
	            B = 0;
	        } else if (wl >= 580 && wl < 645) {
	            R = 1;
	            G = -1 * (wl - 645) / (645 - 580);
	            B = 0.0;
	        } else if (wl >= 645 && wl <= 780) {
	            R = 1;
	            G = 0;
	            B = 0;
	        } else {
	            R = 0;
	            G = 0;
	            B = 0;
	        }
 
	        // intensty is lower at the edges of the visible spectrum.
	        if (wl > 780 || wl < 380) {
	            alpha = 0;
	        } else if (wl > 700) {
	            alpha = (780 - wl) / (780 - 700);
	        } else if (wl < 420) {
	            alpha = (wl - 380) / (420 - 380);
	        } else {
	            alpha = 1;
	        }
 
	        colorSpace = ["rgba(" + (R * 100) + "%," + (G * 100) + "%," + (B * 100) + "%, " + alpha + ")", R, G, B, alpha]
 
	        // colorSpace is an array with 5 elements.
	        // The first element is the complete code as a string.  
	        // Use colorSpace[0] as is to display the desired color.  
	        // use the last four elements alone or together to access each of the individual r, g, b and a channels.  
       
	        return colorSpace;
       
	    }
.WithColor {
		height: 100px;
    display: inline-block;
}
<div class="WithColor"></div>
<div class="WithColor"></div>
<div class="WithColor"></div>
<div class="WithColor"></div>
<div class="WithColor"></div>

代码自动计算div的数量，创建匹配的颜色并调整div的长度。 这是显示其工作方式的JSFiddle：https://jsfiddle.net/Korne127/8hvgqkn2/1

答案 3 :(得分：0)

这应该使您清楚地知道如何去做您要问的事情。选择自己的样式。 （我不是设计师。）

<html>
<head><style>   #container > div{ height: 40px; width: 200px; border: 3px solid gray; }</style></head>
<body>
  <div id="container">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <script>
    const colorNames = ["darkOrchid", "blue", "limeGreen", "orange", "orangeRed"];  
    // Assuming all the divs are inside the same containing element
    const divNodeList = document.getElementById("container").children;
    for(let i = 0; i < divNodeList.length; i++){
      let div = divNodeList[i];
      let colorIndex = i % colorNames.length; // Modulo operator ("%") let us wrap around
      div.style.backgroundColor = colorNames[colorIndex];
    };
  </script>
  </html>

顺便说一句，您可以通过将其粘贴到html文件中来查看其运行情况。 （已在Windows的Chrome中测试。）

答案 4 :(得分：0)

这将选择任何div并创建彩虹图案。

const colors = ["#3d207f","#6399e7","#adce37","#fdcd38","#e87452"]

let currentColor = 0
document.querySelectorAll("div").forEach(div => {
  div.style.backgroundColor = colors[currentColor]
  currentColor >= colors.length ? currentColor = 0 : currentColor++
})
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>

相关问题
最新问题