根据值以较小的增量更改Div类

时间：2016-02-23 20:27:57

标签： javascript html css

我试图创建一个Div，它可以有大约100种不同的阴影，具体取决于变量的值，在这种情况下是＃34;投票＆＃34;。按钮更加响亮。按钮越多，就越沮丧。

我可以使用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";
}

但是，无论如何在某个地方使用投票值来设置实际的背景颜色而不是类？

5 个答案:

答案 0 :(得分：7)

将1000％渐变背景从红色设置为蓝色，然后在更新投票时，只需更改其在javascript上的位置：document.getElementById("element").style.backgroundPosition = "0% 50%";。最小值（红色）：0% 0%中间（紫色）：0% 50%最大值（蓝色）：0% 100%

更新：正如您在评论中看到的那样，请使用＆＃34; 100000％＆＃34;而不是＆＃34; 1000％＆＃34;避免任何渐变阴影被注意到。

＆＃13;
＆＃13; 
function test(){

var votes = document.getElementById("test").value;  
document.getElementById("testobj").style.backgroundPosition = "0% " + votes + "%";
  
}
＆＃13; 
.square {
  width:100px;
  height:100px;
  background: linear-gradient(0deg, skyblue, tomato);
  background-size: 100000% 100000%;
  float:left;
  line-height: 100px;
  text-align: center;
  outline: 2px solid black;
}

input {
  margin-left: 5px;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
}

.A {
  background-position:0% 0%;  
}

.B {
  background-position:0% 50%;  
}

.C {
  background-position:0% 100%;
}

.D {
  width:100px;
  height:100px;
  background: linear-gradient(0deg, skyblue, tomato);
  background-size: 100000% 100000%;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  outline: 2px solid black;
}
＆＃13; 
<div class="square A">0%</div>
<div class="square B">50%</div>
<div class="square C">100%</div>
<input id=test type="range" name="votes" min="0" max="100" oninput="test()">
<div id=testobj class="D">Slider test</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

是的，通过在css input[value="1"]{}

中定位这样的值

请参阅小提琴：https://jsfiddle.net/vctbszc2/4/

HTML 

<input type="button" value="1"><br>
<input type="button" value="2"><br>
<input type="button" value="3"><br>
<input type="button" value="4"><br>

CSS 

input[value="1"]{
  background-color: blue;
}
input[value="2"]{
  background-color: red;
}
input[value="3"]{
  background-color: green;
}
input[value="4"]{
  background-color: yellow;
}

所以在阅读了Pulie的评论之后，你能得到的最接近的是： http://jsfiddle.net/6DAwY/952/

这将为您提供8个条件的范围。通过使用input[value^="1"]，您正在寻找一个数字为1的值，所以10,11,12 ....然后当您点击20时，它将使用此css input[value^="2"]，依此类推。

HTML 

<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">

CSS 

[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;   
}

答案 2 :(得分：1)

你不能只用CSS做你想做的所有事情，但有几种不同的方法可以达到所需的效果，包括CSS和另一种语言。

选项1：通过JavaScript设置内联CSS样式

而不是更改元素的类，您可以直接更改其样式，如Andrew Willems's answer所示：

var votes = 0;

function shadeColor() {
    var numLvls = 25;
    var maxVotes = 200;
    var redVal = parseInt(parseInt(Math.min(votes, maxVotes) / maxVotes * (numLvls - 1)) / (numLvls - 1) * 255);
    var bluVal = 255 - redVal;
    color = "rgb(" + redVal + ", 0, " + bluVal + ")";
    return color;
}

function updateVotecount() {
    document.getElementById("voteCount").value = votes;
}

function vote() {
    votes = votes + 10;
    updateVotecount();
    document.getElementById("myShade").style.backgroundColor = shadeColor();
}

document.getElementById("myShade").style.backgroundColor = shadeColor();
document.getElementById("update").addEventListener("click", vote);
#myShade, input {
    color : #FFF;
    disabled: true;
    background: transparent;
    border : none;
}
<div id="myShade">
   Number of votes = <input id="voteCount" value="0">
</div>
<button id="update">Vote</button>

此选项适用于所有浏览器，但它仍然是纯JS选项。

（另见this Fiddle）

选项2：使用CSS预处理器

另一个需要考虑的选择是使用CSS preprocessor或Less这样的Sass语言，它不仅会添加变量，还会添加mixins，functions以及其他一些有趣的东西。

在Sass中，你可以这样做：

$votes : 20;

@function shade-color($votes) {
    $numLvls : 25;
    $maxVotes : 200;
    $redVal : round(round(min($votes, $maxVotes) / $maxVotes * ($numLvls - 1)) / ($numLvls - 1) * 255);
    $bluVal : 255 - $redVal;
    @return unquote("rgb(" + $redVal + ", 0, " + $bluVal + ")");
}

.shade {
    color: shade-color($votes);
}

这个Sass代码会生成以下CSS：

.shade {
    color: rgb(21, 0, 234);
}

不幸的是，这会为您的堆栈添加另一种脚本语言，这可能会使问题变得更加复杂。此外，当变量值经常更新时，预处理器语言并不理想，因为它们需要先编译成CSS才能在浏览器中使用。

选项3：将CCS变量与JavaScript逻辑组合

最新的CSS规范允许变量，可以从JavaScript访问。

这意味着你可以这样做：

var votes = 0;

function shadeColor() {
    var numLvls = 25;
    var maxVotes = 200;
    var redVal = parseInt(parseInt(Math.min(votes, maxVotes) / maxVotes * (numLvls - 1)) / (numLvls - 1) * 255);
    var bluVal = 255 - redVal;
    color = "rgb(" + redVal + ", 0, " + bluVal + ")";
    return color;
}

function updateVotecount() {
    document.getElementById("voteCount").value = votes;
}

function vote() {
    votes = votes + 10;
    updateVotecount();
    document.body.style.setProperty('--shade-color', shadeColor(votes));
}

document.body.style.setProperty('--shade-color', shadeColor(votes));
document.getElementById("update").addEventListener("click", vote);
body {
    --shade-color : #000;
}

#myShade, input {
    color : #FFF;
    disabled: true;
    background: transparent;
    border : none;
}

#myShade {
    background : var(--shade-color);
}
<div id="myShade">
   Number of votes = <input id="voteCount" value="0">
</div>
<button id="update">Vote</button>

（另见this Fiddle）

不幸的是，它目前仅受以下浏览器支持：

  • Firefox 43 及以上
  • Chrome 49 及以上
  • Safari 9.1 及以上

几乎所有其他浏览器（包括Chrome 48，IE11和Edge 14）都不支持此功能，这意味着您无法在生产代码中使用它。

答案 3 :(得分：1)

这是一种解决方案，提供从蓝色到红色光谱的颜色，该颜色被划分为特定数量的离散颜色（numLvls）。这需要为＆＃34;最高＆＃34;设置投票计数。颜色，即红色（maxVotes）。

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

将两者放在一起，即"rgb(" + redVal + ", 0, " + bluVal + ")"以获得CSS友好的颜色字符串。

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

＆＃13;
＆＃13; 
var votes = 0;
var maxVotes = 13;
var numLvls = 5;
var color = "rgb(0, 0, 255)";

report();

$("button").click(function(evt) {
  if (evt.target.id === "up") votes += 1;
  else votes -= 1;
  if (votes < 0) votes = 0;
  var redVal = parseInt(parseInt(Math.min(votes, maxVotes) / maxVotes * (numLvls - 1)) / (numLvls - 1) * 255);
  var bluVal = 255 - redVal;
  color = "rgb(" + redVal + ", 0, " + bluVal + ")";
  report();
});

function report() {
  $("#votes").html("votes: " + votes + "<br/>color: " + color);
  $("#msg").css("background-color", color);
  $("#maxVotes").text("votes required for full red color: " + maxVotes);
  $("#numLvls").text("number of distinct color levels: " + numLvls);
}
＆＃13; 
#msg {
  color: white;
  background-color: blue;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="up">UP</button>
<button id="dn">DOWN</button>
<div id="msg">&nbsp;Something to be colored based on vote count</div>
<div id="votes"></div>
<div id="maxVotes"></div>
<div id="numLvls"></div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以做的是使用jQuery设置一个带有值的数据属性。然后你可以在你的CSS中使用属性的值。它非常有活力，所以你不需要分别为每种价值风格写作。

div { background-color: attr(data-color) }
相关问题
最新问题