Question

<div id="er_msg" style="width:200px;" align="center"></div>

我正在使用JavaScript向上面的div添加一个类：

function validateForm()
{
    var x=document.forms["form1"]["email_id"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        document.getElementById("er_msg").innerHTML="Pls enter a valid E-Mail Address ";
        document.getElementById("er_msg").className="alert alert-error";

     }else{
         document.getElementById("er_msg").innerHTML="Thank you!";
         document.getElementById("er_msg").className="alert alert-success";
         saveAppdata();


     }
}

理想情况下，我应该获得红色"Pls enter a valid E-Mail Address"和绿色"Thank you!"，而在这种情况下，这两个消息都显示为红色。这些类由Twitter Bootstrap预定义。

Answer 1

我使用Twitter bootstraps css类测试了你的javascript函数，它没有问题。

这是我的jsfiddle代码：http://jsfiddle.net/yqRCX/

以下是css类：

.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.alert, .alert h4 {
    color: #c09853;
}
.alert h4 {
    margin: 0;
}
.alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 20px;
}
.alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-success h4 {
    color: #468847;
}
.alert-danger, .alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}
.alert-danger h4, .alert-error h4 {
    color: #b94a48;
}

所以答案是......我没有看到你提供的代码有任何问题。您的添加类有效。

如果您有其他问题，请提供更多信息，例如您正在尝试的电子邮件值等。

将类添加到元素返回意外结果

1 个答案: