我想根据 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>
最佳答案
您可以使用 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>
关于javascript - 我想根据 java 脚本值显示 css 通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39871471/