div通过javascript改变每行的颜色

时间:2014-03-13 09:28:13

标签: javascript html css

我想用异常和成功消息来填充我的div。

因此,每个例外都应该是红色文本,每个成功都必须是蓝色文本。

我已经完成了

if(FileName1.length == 0 && FileName2.length == 0 && FileName3.length == 0 && FileName4.length == 0)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "No files have been selected to upload";
    err1.style.color = "Red";
}
else if(FileName1 == FileName3 || FileName1 == FileName4 || FileName2 == FileName3 || FileName2 == FileName4)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "Configuration file and Geco script should not be the same as left or right files. Please check your uploads";
    err1.style.color = "Red";
}
//else if(FileName1.value)
else
{
    var scc1 = document.getElementById("box");
    scc1.innerHTML = scc1.innerHTML + "<br>" +  "Uploading files, the page might refresh";
    scc1.style.color = "Blue";
    document.myform.submit();   
}
但是,如果成功消息显示红色消息也变为蓝色,我该如何处理?如何将蓝色表示成功并将红色表示为同一个div中的异常?

PS:我已使用以下方法保留以前的div数据

scc1.innerHTML + "<br>" + 

2 个答案:

答案 0 :(得分:2)

您可以使用span在另一个下方附加文字并为span提供css 像这样

if(FileName1.length == 0 && FileName2.length == 0 && FileName3.length == 0 && FileName4.length == 0)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "<span class='red'>No files have been selected to upload</span>";
}
else if(FileName1 == FileName3 || FileName1 == FileName4 || FileName2 == FileName3 || FileName2 == FileName4)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "<span class='red'>Configuration file and Geco script should not be the same as left or right files. Please check your uploads</span>";
}
//else if(FileName1.value)
else
{
    var scc1 = document.getElementById("box");
    scc1.innerHTML = scc1.innerHTML + "<br>" +  "<span class='blue'>Uploading files, the page might refresh</span>";
    document.myform.submit();   
}

和CSS就像:

.red{
   color:red;
}
.blue{
   color:blue;
}

答案 1 :(得分:1)

我认为列表(UL)作为容器会比在DIV中附加每个文本后跟BR更好。您可以使用类“异常”/“成功”,因此每次添加新的LI元素时都可以添加类“异常”或“成功”。然后在css中用正确的颜色定义'exception'和'success'。

示例:

var mylist= document.getElementById("box_list");
var li=document.createElement('li');

mylist.appendChild(li);
li.innerHTML='myerror message';
li.addClass('theclass_either_error_or_success')

在css中你定义了类