Question

更改名字的颜色仅在字符串不为空时才有效，如果有文字则会变为绿色但是当它是空字符串时它不会变为红色。我怎么能这样做？

    $(document).on("click", '.btn-info.mailContact', function() {
      values = {
        MailTo: $('.Emailadres').val(),
        FirstName: $('.Firstname').val(),
        Onderwerp: $('.Subject').val(),
        Email: $('.Emailadres').val(),
        Tel: 'n.v.t.',
        Text: $('.TheMessage').val(),
        Comment: 'Comment'
      };
      if ($('.Firstname').val() != "" && $('.Subject').val() != "" &&
        $('.TheMessage').val() != "" && $('.Emailadres').val() != "") {
        State.sendContactMail(values);
        window.location.href = '/confirmation';
      } else {
        if (FirstName != "") 
          FirstName.style.color = "green";
        else
          FirstName.parents.style.color = "red";
    
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2" >
  <strong class="FirstnameTitle"> 
    <span class="text-danger">*</span>
    Naam: 
  </strong>
</div> 
<div class="col-md-10"> 
  <input autofocus="autofocus" required="required" type="text" 
         class="form-control Firstname" id="FirstName" placeholder="Vul je naam hier in"/>
</div>

Answer 1

CSS color 属性会影响其应用元素的前景颜色。对于包含文本（字符串）的元素，颜色将应用于字符。当没有字符（空字符串）时，没有什么可以应用颜色，所以你看不到任何颜色。

您可以将 background-color 应用于元素，以查看在用颜色填充的页面上占据的空间。但是，对于内联元素（即<span>，<a>），其width由其内容大小决定，因此如果它们为空，则无法填写任何大小。块级元素（即<div>，<section>），其height由其内容决定，因此如果没有内容，则没有height。但是，对于内联和块元素，您可以手动设置大小（内联元素必须设置为display:inline-block）到＆＃34; hold＆＃34;元素打开。一旦设置了非零尺寸，就可以看到背景颜色。表单元素（默认情况下具有已定义的大小）可以设置为具有背景颜色，而无需考虑它们是否具有内容。

以下是一个例子：

＆＃13;

var t = document.getElementById("txt");

t.addEventListener("input", function(){

  t.style.backgroundColor = t.value === "" ? "#f00" : "#0f0";
 
});

＆＃13;

Type some characters and then delete them:
<input type="text" id="txt">

＆＃13;

另外，请记住，通过添加HTML required 属性，然后使用CSS {{3}，可以在不使用JavaScript的情况下完成基于空字段的简单视觉样式}} 和 :valid 伪类，如下所示：

＆＃13;

#txt:valid { background-color:#0f0; }
#txt:invalid { background-color:#f00; }

＆＃13;

Type some characters and then delete them: <input type="text" id="txt" required>

＆＃13;

Answer 2

...

FirstName: $('.Firstname').val(),

...

FirstName.style.color = "green";

这里有一些问题：

您已将FirstName定义为values对象字面值的属性，但当您尝试设置颜色时，您只需调用{{1 }}，而不是FirstName。
您正试图在values.FirstName上设置颜色，这只是一个字符串。您需要在实际元素上设置颜色 - $('.Firstname').val()。

Javascript无法更改空字符串颜色

2 个答案: