Javascript 根据小增量的值更改Div类

我试图创建一个Div，它可以有大约100种不同的色调，这取决于一个变量的值，在本例中是“投票”。投票越多，按钮越红。投票越多，按钮就越蓝

我可以很容易地用8个类创建这样的函数：

$scope.divColor = function (votes) {
    if (votes < 60)
        return "blue60";
    else if (votes >= 60 && votes <= 69)
        return "blue70";
    else if (votes >= 70 && votes <= 79)
        return "blue80";
    else if (votes >= 80 && votes <= 89)
        return "blue90";
    else if (votes >= 90 && votes <= 99)
        return "red100";
    else if (votes >= 100 && votes <= 109)
        return "red110";
    else if (votes >= 110 && votes <= 119)
        return "red120";
    else if (votes >= 120)
        return "red130";
}

$scope.divColor=函数（投票）{
如果（票数<60）
返回“蓝色60”；
否则，如果（票数>=60&&D票数=70&&D票数=80&&D票数=90&&D票数=100&&D票数=110&&D票数=120）
返回“red130”；
}

---

但是，是否有一个变量在某个地方使用投票值而不是类来设置实际的背景色呢？

是的，通过在css

输入[value=“1”]{}

参见小提琴：

html

因此，在阅读了Pulie下面的评论之后，你能得到的最接近的东西是这样的：

这将为您提供8种条件的范围。通过使用

input[value^=“1”]

可以查找数字为1的值，因此10,11,12。。。。然后，当您点击20时，它将使用css

输入[value^=“2”]

等等

html

---

您可以做的是使用jQuery设置一个具有值的数据属性。然后可以在css中使用属性值。它是非常动态的，所以您不需要分别为每个值样式编写

div { background-color: attr(data-color) }

---

设置一个从红色到蓝色的1000%渐变背景，然后在更新投票时，只需更改其在javascript上的位置：

document.getElementById（“元素”）.style.backgroundPosition=“0%50%”。其中最小值（红色）：
0%0%
中间值（紫色）：
0%50%
最大值（蓝色）：
0%100%

更新：正如您在下面的评论中看到的，使用“100000%”而不是“1000%”，以避免任何渐变阴影被注意到


功能测试（）{
var票数=document.getElementById（“测试”）.value；
document.getElementById（“testobj”）.style.backgroundPosition=“0%”+投票数+“%”；
}
.square{
宽度：100px；
高度：100px；
背景：线性梯度（0度，天蓝色，番茄）；
背景尺寸：100000%100000%；
浮动：左；
线高：100px；
文本对齐：居中；
外形：2倍纯黑；
}
输入{
左边距：5px；
宽度：100px；
显示：内联块；
垂直对齐：中间对齐；
}
.A{
背景位置：0%0%；
}
.B{
背景位置：0%50%；
}
C{
背景位置：0%100%；
}
博士{
宽度：100px；
高度：100px；
背景：线性梯度（0度，天蓝色，番茄）；
背景尺寸：100000%100000%；
显示：内联块；
线高：100px；
文本对齐：居中；
外形：2倍纯黑；
}
0%
50%
100%
Slider test（滑动测试）
您不能只使用CSS就完成所有您想做的事情，但是有几种不同的方法可以实现所需的效果，包括CSS和其他语言

选项1：通过JavaScript设置内联CSS样式
您可以直接更改元素的样式，而不是更改元素的类，如下所示：


var票数=0；
函数shadeColor（）{
var numLvls=25；
var最大投票数=200；
var redVal=parseInt（parseInt（Math.min（投票数，最大投票数）/最大投票数*（numLvls-1））/（numLvls-1）*255）；
var bluVal=255-redVal；
color=“rgb”（“+redVal+”，0“+bluVal+”）；
返回颜色；
}
函数updateVotecount（）{
document.getElementById（“voteCount”）.value=投票；
}
功能投票（）{
票数=票数+10；
updateVotecount（）；
document.getElementById（“myShade”）.style.backgroundColor=shadeColor（）；
}
document.getElementById（“myShade”）.style.backgroundColor=shadeColor（）；
document.getElementById（“更新”）.addEventListener（“单击”，投票）
#myShade，输入{
颜色：#FFF；
残疾：正确；
背景：透明；
边界：无；
}

投票数=
投票
这里有一个解决方案，提供从蓝色到红色光谱的颜色，该光谱被划分为特定数量的离散颜色（
numLvls
）。这需要设置“最高”颜色的投票计数，即红色（
maxvots
）

将这两种颜色组合在一起，即
rgb（“+redVal+”，0，“+bluVal+”）
以获得CSS友好的颜色字符串

有关演示，请参见下面的代码片段。该示例使用5种颜色级别，而不是问题中的100，只是为了简单起见，但可以使用任何值


var票数=0；
var最大投票数=13；
var numLvls=5；
var color=“rgb（0,0255）”；
报告（）；
$（“按钮”）。单击（功能（evt）{
如果（evt.target.id==“up”）投票+=1；
其他票-=1；
如果（票数<0）票数=0；
var redVal=parseInt（parseInt（Math.min（投票数，最大投票数）/最大投票数*（numLvls-1））/（numLvls-1）*255）；
var bluVal=255-redVal；
color=“rgb”（“+redVal+”，0“+bluVal+”）；
报告（）；
});
功能报告（）{
$（“#投票数”）.html（“投票数：+投票数+”
颜色：+颜色）；
$（“#msg”）.css（“背景色”，颜色）；
$（“#最大票数”）.text（“全红所需票数：+maxvots”）；
$（“#numLvls”）.text（“不同颜色级别的数量：”+numLvls）；
}
#msg{
颜色：白色；
背景颜色：蓝色；
}

向上的
向下
根据计票结果要上色的东西
不……不是。CSS不是一种编程语言你是对的，所以我会编辑我的答案。不过这是一批100种颜色的CSS。这是问题的重点，基本上是“没有CSS怎么做？”是的……但这不是问题。OP想要100种颜色，但只想在类名或属性中使用一个变量…哪个CSS还不支持。真的吗？我想你还不会发现任何浏览器都支持它。目前，不幸的是，它只能用作：after/：before“content”。这是真的。我忘了。但若你们想使用它，当然是有可能的。使你的元素相对，和后面或前面的伪绝对智慧
input[value="1"]{
  background-color: blue;
}
input[value="2"]{
  background-color: red;
}
input[value="3"]{
  background-color: green;
}
input[value="4"]{
  background-color: yellow;
}

<input value="0">
<input value="11">
<input value="23">
<input value="35">
<input value="42">
<input value="53">
<input value="65">
<input value="72">
<input value="86">

[value^="0"] {
  background-color: purple;   
}
input[value^="1"] {
  background-color: red;   
}
input[value^="2"] {
  background-color: green;   
}
input[value^="3"] {
  background-color: yellow;   
}
input[value^="4"] {
  background-color: blue;   
}
input[value^="5"] {
  background-color: orange;   
}
input[value^="6"] {
  background-color: grey;   
}
input[value^="7"] {
  background-color: lightblue;   
}
input[value^="8"] {
  background-color: lightgreen;   
}

div { background-color: attr(data-color) }

var redVal = parseInt(parseInt(Math.min(votes, maxVotes) / maxVotes * (numLvls - 1)) / (numLvls - 1) * 255);
var bluVal = 255 - redVal;