Javascript 如何动态更改文本的颜色？

我想要绿色的“密码匹配”和红色的“密码不匹配”

我正在尝试这些代码行，但没有发生。 但主要的问题是“密码匹配”和“密码不匹配”即将出现

<script type="text/javascript">

function checkPasswordMatch() {
var password = $("#txtNewPassword").val();
var confirmPassword = $("#txtConfirmPassword").val();

if (password == confirmPassword)
    $("#divCheckPasswordMatch").html("Password Matched");
else
    $("#divCheckPasswordMatch2").html("Passwords Don't Match.");
}

$(document).ready(function () {
$("#txtConfirmPassword").keyup(checkPasswordMatch);
}); 
</script>

函数checkPasswordMatch（）{
var password=$（“#txtNewPassword”）.val（）；
var confirmPassword=$（“#txtConfirmPassword”）.val（）；
如果（密码==确认密码）
$（“#divCheckPasswordMatch”）.html（“密码匹配”）；
其他的
$（“#divCheckPasswordMatch2”）.html（“密码不匹配”）；
}
$（文档）.ready（函数（）{
$（“#txtConfirmPassword”）.keyup（checkPasswordMatch）；
}); 

这是我的HTML代码

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword">
<br />
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();">
<div id="divCheckPasswordMatch2" style="color:red">
<div id="divCheckPasswordMatch" style="color:green">

尝试下面的方法以获得持久的颜色：

if (password == confirmPassword)
    $("#divCheckPasswordMatch").html("Password Matched").css("color", "green");
else
    $("#divCheckPasswordMatch2").html("Passwords Don't Match.").css("color", "red");
}

---

如果我这样做，我将只有一个div用于消息，然后相应地设置样式。然后，如果输入了新密码，我会清除消息

<style>
    .green {
        color: green;
    }
    .red {
        color: red;
    }
</style>

<script type="text/javascript">
    function checkPasswordMatch() {
        var password = $("#txtNewPassword").val();
        var confirmPassword = $("#txtConfirmPassword").val();

        if (password == confirmPassword) {
            $("#divCheckPasswordMatch").text("Password Matched");
            $("#divCheckPasswordMatch").css("color", "green");
        }
        else {
            $("#divCheckPasswordMatch").text("Passwords Don't Match");
            $("#divCheckPasswordMatch").css("color", "red");

        }
    }

    function clearMessage() {
        $("#divCheckPasswordMatch").text("");
    }

    $(document).ready(function () {
        $("#txtNewPassword").keyup(clearMessage);
        $("#txtConfirmPassword").keyup(checkPasswordMatch);
    }); 
</script>

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword">
<br />
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();">
<div id="divCheckPasswordMatch"></div>

格林先生{
颜色：绿色；
}
瑞德先生{
颜色：红色；
}
函数checkPasswordMatch（）{
var password=$（“#txtNewPassword”）.val（）；
var confirmPassword=$（“#txtConfirmPassword”）.val（）；
如果（密码==确认密码）{
$（“#divCheckPasswordMatch”）.text（“密码匹配”）；
$（“#divCheckPasswordMatch”）.css（“颜色”、“绿色”）；
}
否则{
$（“#divCheckPasswordMatch”）.text（“密码不匹配”）；
$（“#divCheckPasswordMatch”）.css（“颜色”、“红色”）；
}
}
函数clearMessage（）{
$（“#divCheckPasswordMatch”）.text（“”）；
}
$（文档）.ready（函数（）{
$（“#txtNewPassword”）.keyup（clearMessage）；
$（“#txtConfirmPassword”）.keyup（checkPasswordMatch）；
}); 

需要关闭html中的

。您的浏览器不知道如何构造损坏的html，因此它可能会将您的html呈现为嵌套的

，如下所示：

<div id="divCheckPasswordMatch2" style="color:red">
   <div id="divCheckPasswordMatch" style="color:green">
   </div>
</div>

浏览器删除另一个

以放入字符串

“密码不匹配”

。结果是：

<div id="divCheckPasswordMatch2" style="color:red">
   <!-- This other div is removed -->
   Passwords don't match
</div>

通过添加结束标记，可以告诉浏览器在何处结束块，也可以告诉浏览器块彼此相邻且不包含彼此。通过此更改，您现在可以在两个div中自由添加和删除文本，并且不会影响另一个div

现在，让我们把这个修正再深入一点

@dman2306正确地指出，您的代码将显示所写的错误消息和成功消息。让我们通过只使用一个div并更改类来解决这个问题

使用以下命令：

//HTML5在脚本块上不需要类型标记
函数checkPasswordMatch（）{
var password=$（“#txtNewPassword”）.val（）；
var confirmPassword=$（“#txtConfirmPassword”）.val（）；
var div=$（“#消息块”）；
如果（密码==确认密码）{
$（div）.removeClass（“坏密码”）；
如果（密码=“”&&confirmPassword=“”）{
/* 
我们不删除div。
我们将html内容设置为
空字符串。这边
我们将来可以再次使用DIV*/
$（div.html（“”）；
}否则{
$（div.html（“密码匹配”）；
}
}
其他的
{
$（div.html（“密码不匹配”）；
$（div）.addClass（“坏密码”）；
}
}
$（文档）.ready（函数（）{
$（“#txtConfirmPassword”）.keyup（checkPasswordMatch）；
});
#消息块{颜色：绿色；}
#messageBlock.bad_密码{color:red；}

例子
请输入密码以检查消息div的行为



如果（password=confirmPassword）
错误。这应该是==而不是=。这里还有很多其他错误，比如如果我的密码不匹配，然后我再试一次，它们都会显示出来。或者更好：
if（password===confirmPassword）{
=
不用于比较。也要始终解释发生了什么和应该发生什么，而不是含糊其辞。您在控制台中遇到了什么错误？您进行了哪些调试？是否包括jQuery？您没有关闭
div
，因此可能是
divCheckPasswordMatch
嵌套在y下我们的
divCheckPasswordMatch2
，因此，如果密码不匹配，它将被删除。谢谢，它工作正常。但是如果密码字段仍然为空，则不应显示该消息。为此，我编写了
if（password==empty）{$（div）.remove；}
但它不起作用您不想删除您的消息div，因为它会阻止您以后再次使用它。您可以动态创建和添加div，但如果（password==empty）{$（div.innerHTML=“；”}，则使用
要容易得多
它删除文本并使div为空。如果您希望div不再占用屏幕空间（可能您有一个按钮，当div为空时，您希望向上移动），则可以添加行
$（div）。hidden=true；
这类似于
$（div）.visible=false
，除了
hidden
属性外，它还折叠div的维度，因此它占用零空间。visible属性仅控制它是否可见。通过使用这些属性，您不必担心创建、插入、更改和删除div。您只需更改已经不可见的div这里。我试过这些代码，但不起作用，可能是我做错了什么。（你能给我们一个代码片段吗？
<div id="divCheckPasswordMatch2" style="color:red">
   <!-- This other div is removed -->
   Passwords don't match
</div>

<div id="divCheckPasswordMatch2" style="color:red"></div>
<div id="divCheckPasswordMatch" style="color:green"></div>