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

Question

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

您可以尝试使用“well”类获取每个 div 的 innerHTML，然后假设它是一个介于 0 和 10 之间的数字，将 div 的不透明度设置为该数字除以 10。因此，如果 innerHTML 为 2 , 然后不透明度设置为 0.2。

我已将一些 Javascript 添加到您的代码段以实现此目的。

您可以更改其中的数学运算，使其变为 1-100 或其他值。

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>