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

Question

我正在寻找一种方法来根据一系列数值更改多列的背景颜色。我知道Colorjizz PHP库但不确定它是否符合我的目的。我需要下面代码中的列，根据一系列数值将背景颜色更改为绿色/红色/橙色的相应阴影。例如，从1-100或0.1到10.0。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试使用＆＃34; well＆＃34;来抓取每个div的innerHTML。 class，然后假设它是0到10之间的数字，将div的不透明度设置为该数字除以10.因此，如果innerHTML为2，则不透明度设置为0.2。

我已经在您的代码段中添加了一些Javascript以实现此目的。

您可以在此更改数学，使其为1-100或其他。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;