Question

我想更改html文本的颜色，如果密码是错误然后它应该以红色显示，如果是正确的那么它应该以绿色显示这里是我不使用jquery的代码我搜索了它通过堆栈流我发现ni试图实现它，但它没有工作所以我发布了这个问题

<div class="td">
    <input type="password" id="txtNewPassword" />
</div>
<div class="td">
    <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

和javascript

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

    if (password != confirmPassword)
        $("#divCheckPasswordMatch").html("Passwords do not match!");
    else
        $("#divCheckPasswordMatch").html("Passwords match.");
}

$(document).ready(function () {
   $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
});

我想改变密码的颜色不匹配！红色，密码匹配绿色

Answer 1

您可以使用以下代码更改javascript的文本颜色

document.getElementById("divCheckPasswordMatch").style.color = "#ff0000";
document.getElementById("divCheckPasswordMatch").style.color = "magenta";
document.getElementById("divCheckPasswordMatch").style.color = "blue";
document.getElementById("divCheckPasswordMatch").style.color = "lightblue";

Answer 2

您可以使用css更改颜色或

试试这个代码

＆＃13;

    function checkPasswordMatch() {
      var password = $("#txtNewPassword").val();
      var confirmPassword = $("#txtConfirmPassword").val();
       if (password != confirmPassword)
       {
        var match="Passwords do not match!";
        var result=match.fontcolor('red');
        $("#divCheckPasswordMatch").html(result);
       }
      else
      {
        var match="Passwords match.";
        var result=match.fontcolor('green');
        $("#divCheckPasswordMatch").html(result);
     }
  }
    $(document).ready(function() {
      $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="td">
  <input type="password" id="txtNewPassword" />
</div>
<div class="td">
  <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

＆＃13;

使用字体颜色属性更改文字颜色

Answer 3

只需使用单行if条件和jquery

的css()函数

如果匹配绿色
其他红色

function checkPasswordMatch() {
  var password = $("#txtNewPassword").val();
  var confirmPassword = $("#txtConfirmPassword").val();
  var html = password != confirmPassword ? "Passwords do not match!" : "Passwords match";
   var color = password != confirmPassword ? "red" : "green";
  $("#divCheckPasswordMatch").html(html).css('color',color)
}
$(document).ready(function() {
  $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="td">
  <input type="password" id="txtNewPassword" />
</div>
<div class="td">
  <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

Answer 4

function checkPasswordMatch() {
    // Other code
    var $message = $("#divCheckPasswordMatch");
    if (password !== confirmPassword)  {
            $message.html("Passwords do not match!");
            $message.css("color", "red");
    } else {
            $message.html("Passwords match.");
            $message.css("color", "green"); 
    }
}

如何在javascript中更改文本颜色

4 个答案: