javascript - 我想根据 java 脚本值显示 css 通知

Question

我想根据 javascript 值显示 css 通知。但是，它显示了当前所有的通知，我想将 javascript 值添加到通知框。

这是我的javascript方法

    var colorBox = function() {

      alert("myValues" + myValues);


      //document.getElementsByClassName('alert-box error').innerHTML=myValues[0];;
      var myValues = [100];

      if (myValues[0] < 70) {

        var container = document.getElementsByClassName('alert-box success');



      } else if (myValues >= 51 && myValues.value < 70) {
        var container = document.getElementsByClassName('alert-box error');

      } else if (myValues <= 50) {
        var container = document.getElementsByClassName('alert-box warning');

      }
    }
    colorBox();

<div class="alert-box error"><span>error: </span>Write your error message here.</div>
<div class="alert-box success"><span>success: </span>Write your success message here.</div>
<div class="alert-box warning"><span>warning: </span>Write your warning message here.</div>
<div class="alert-box notice"><span>notice: </span>Write your notice message here.</div>

Answer 1

您可以使用 hidden 属性最初隐藏所有警报容器，然后在显示警报时删除 hidden 属性。

var colorBox = function(value) {

  if (value < 70) {
    var container = document.getElementsByClassName('alert-box success')[0];
    container.removeAttribute('hidden');
  } else if (value >= 51 && value < 70) {
    var container = document.getElementsByClassName('alert-box error')[0];
    container.removeAttribute('hidden');
  } else if (value <= 50) {
    var container = document.getElementsByClassName('alert-box warning')[0];
    container.removeAttribute('hidden');
  }
}

colorBox(50); // or any other value

<div class="alert-box error" hidden><span>error: </span>Write your error message here.</div>
<div class="alert-box success" hidden><span>success: </span>Write your success message here.</div>
<div class="alert-box warning" hidden><span>warning: </span>Write your warning message here.</div>
<div class="alert-box notice" hidden><span>notice: </span>Write your notice message here.</div>