动态的div数量=动态颜色变化步骤？

Question

我希望有一些动态数量的div（有时是3个，有时是10个等），根据颜色渐变（比如从绿色到红色），来进行着色。

所以，当只有两个div时，第一个应该是“#0F0”，第二个是“#F00”。但是，如果有10个div，则第一个和最后一个应该相同，而所有中间的div都应该从绿色逐渐变为红色。

是否有一种使用纯CSS实现的方法？如果没有，你会如何使用JavaScript来实现呢？我正在考虑使用JavaScript来实现，但我觉得这会变得非常复杂。有什么建议吗？谢谢。

- user3787706

---

所以你想要一个动态数量的单独元素具有不同的颜色，并且可以平滑地从一种颜色过渡到另一种颜色？ - Jesse

如果有6个div，情况会怎样？ - Mi-Creativity

在谷歌搜索有助于找到你需要的东西... https://dev59.com/9XA75IYBdhLWcg3w1sv2 这看起来正是你想要的。 - Danmoreng

它确实可以，但我想知道是否可能仅使用纯CSS来完成。 - user3787706

Answer 1

CSS无法像JavaScript那样从输入中计算数值，因此我的个人建议是为不同数量的子元素定义容器类。例如:

.two{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
}

.three{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
    div:nth-child(3){background-color: ...}
}

.four{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
    div:nth-child(3){background-color: ...}
    div:nth-child(4){background-color: ...}
}

这种方法的限制在于它不是动态的，但可以模拟所需的功能，只要声明足够多的类。

- leuquim

---

据我所知，这是在纯CSS中实现效果的唯一方法，因为CSS无法确定动态元素的数量，也无法进行颜色计算。如果你感觉有趣，可以学习SASS并编写一个简单的循环来生成此代码，以及正确的颜色计算，这样就不必做那么多工作了。 - jeffjenx

Answer 2

这是一个可以实现你所需功能的代码片段；)

https://jsfiddle.net/tkzr99vx/

它会创建一个div，其数量由您在 createDivs 方法中传递的数量决定。

像我所做的一样，使用 rgb 值可以使代码更简单。您仍然可以使用 HEX 值，但需要将其转换为rgb。

- Hugo

---

同时这是我的JS版本，纯CSS无法实现。 - Hugo

Answer 3

这是一个使用十六进制值仅包含两种颜色的快速脚本。

var elements = document.querySelectorAll('div');
var total = elements.length;
var step = 255 / (total - 1);

Array.prototype.forEach.call(elements, function(elem, i){
    var colorHexValue1 = (step * i).toString(16);
    var colorHexValue2 = (255 - step * i).toString(16);
    var formattedColor1 = ("0" + colorHexValue1).split('.')[0].slice(-2);
    var formattedColor2 = ("0" + colorHexValue2).split('.')[0].slice(-2);
    
    elem.style.backgroundColor = '#'+formattedColor1+formattedColor2+'00';
});

<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>

- Joseph Marikle

---

请问您能否解释一下为什么要调用array.prototype？ - user3787706

@user3787706 这个问题没有标记jQuery，所以我只能使用JavaScript函数。否则，我会使用jQuery的.each()。我本可以使用for(var i = 0, len = elements.length; i < len, i++)循环，并使用elements[i]引用元素，但我更喜欢forEach的工作方式，因此出于偏好而使用了它。当在除数组之外的任何东西上使用forEach时，您必须调用原型函数并将其传递给您正在迭代的内容（在这种情况下为elements）。最终，这只是基于偏好的选择。 - Joseph Marikle

另外，如果IE 8或更早版本的兼容性很重要，请不要使用forEach。它仅适用于IE 9或更高版本。 - Joseph Marikle