Geek Answers Handbook

Change the Div class depending on the value in small increments

I am trying to create a Div that can have about 100 different hues depending on the value of the variable, which in this case is the “voice”. The larger the red button increases. The more downvotes the bluer button.

I can easily make such a function with 8 classes:

$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";
}

But is there anyway a variable somewhere that uses the value of the votes to set the actual background color, not the class?

+4
source share
5 answers

1000% , , , javascript: document.getElementById("element").style.backgroundPosition = "0% 50%";. min (): 0% 0% (): 0% 50% max (): 0% 100%

:. , "100000%" "1000%", - .

function test(){

var votes = document.getElementById("test").value;  
document.getElementById("testobj").style.backgroundPosition = "0% " + votes + "%";
  
}
.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;
}
<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>
Hide result
+7

, , 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;   
}
+3

, , CSS, , CSS, .

1: 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.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>
Hide result

, - JS.

(. )

2: CSS

CSS, Less Sass, , mixins, .

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>
Hide result

(. )

, :

  • Firefox 43
  • Chrome 49
  • Safari 9.1

( Chrome 48, IE11 Edge 14) , , .

+1

, - , (numLvls). " " , (maxVotes).

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

Connect the two, i.e. "rgb(" + redVal + ", 0, " + bluVal + ")"to get a CSS-enabled string.

See the code snippet below for a demonstration. This example uses 5 color levels for simplicity, not 100 from your question, but you can use any value.

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);
}
#msg {
  color: white;
  background-color: blue;
}
<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>
Run codeHide result
+1
source

What you can do is set the data attribute with a value with jQuery. And then you can use the attribute value in your css. This is very dynamic, so you do not need to write values ​​for each style separately.

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

More articles:


All Articles