Bootstrap 3-基于值的自动背景色

Question

I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.

 .green-bg { background-color: green!important; color: white; } .red-bg { background-color: red!important; color: white; } .orange-bg { background-color: orange!important; color: white; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <div class="well green-bg">1 </div> </div> <div class="col-md-12"> <div class="well red-bg">3 </div> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <div class="well orange-bg">2 </div> </div> <div class="col-md-12"> <div class="well green-bg">4 </div> </div> </div> </div> </div> </div> 

Answer 1

You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.

I've added some Javascript to your snippet to make this happen.

You could change the math in this to make it 1-100 or something else.

 function wellColorShade() { var wells = document.getElementsByClassName("well"); for(var i = 0; i < wells.length; i++) { var well = wells[i]; well.style.opacity = (well.innerHTML / 10); } }; wellColorShade(); 

 .green-bg { background-color: green!important; color: white; } .red-bg { background-color: red!important; color: white; } .orange-bg { background-color: orange!important; color: white; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <div class="well green-bg">1 </div> </div> <div class="col-md-12"> <div class="well red-bg">3 </div> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <div class="well orange-bg">2 </div> </div> <div class="col-md-12"> <div class="well green-bg">4 </div> </div> </div> </div> </div> </div>