在javascript中更改颜色文本答案

【问题标题】：Change color text in javascript在javascript中更改颜色文本
【发布时间】：2017-12-29 13:31:29
【问题描述】：

我是 javascript 新手，我想在下面的代码中更改不同类的颜色。例如，我想要类 'ok' 的颜色为绿色，类的 'error' 的颜色为红色。

$('#pass').keyup(function (e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('Minimum 6 znaków');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').className = 'ok';
        $('#passstrength').html('Silne!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').className = 'alert';
        $('#passstrength').html('Średnie!');
    } else {
        $('#passstrength').className = 'error';
        $('#passstrength').html('Słabe!');

    }
    return true;
});

【问题讨论】：

$('#passstrength').className 将不起作用。使用addClass() 和removeClass()。
只需使用addClass() .. 已经用颜色定义了你的css。

标签： javascript colors passwords

【解决方案1】：

问题在于这个$('#passstrength').className

className 是设置或返回类的原生 javascript 方法

$('#passstrength') 是一个 jquery 对象，className 将无法与这个 jquery 对象一起使用

但它适用于document.getElementById('passstrength').className='yourClassName'

和 jquery addClass & removeClass 将工作

【讨论】：

好的，谢谢您的回复，但现在当我输入密码时，颜色正在改变，而当我删除字母时，颜色会与最后一种颜色保持一致。我该如何改变呢？
@sirswistak 你在用什么 javascript 或 jquery？
javascript。我为每个类添加了 css 颜色，它可以工作，但是当你删除密码时，颜色仍然存在
delete 是什么意思？分享更新的sn-p 并指定哪个部分不起作用

【解决方案2】：

您需要使用适当的 jquery 函数来添加所需的类。

$('#pass').keyup(function (e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('Minimum 6 znaków');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').addClass('ok');
        $('#passstrength').removeClass('alert');
        $('#passstrength').removeClass('error');
        $('#passstrength').html('Silne!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').addClass('alert');
        $('#passstrength').removeClass('ok');
        $('#passstrength').removeClass('error');
        $('#passstrength').html('Średnie!');
    } else {
        $('#passstrength').addClass('error');
        $('#passstrength').removeClass('ok');
        $('#passstrength').removeClass('alert');
        $('#passstrength').html('Słabe!');

    }
    return true;
});

addClass 将指定的类添加到匹配元素集中的每个元素。所以用它来实现你想要的。

【讨论】：