时间戳

首页 > 解决方案 > 如何在 JavaScript 中显示结果后更改变量的字体颜色？

javascript - 如何在 JavaScript 中显示结果后更改变量的字体颜色？

问题描述

我是 JavaScript 的初学者，当它在我的 JavaScript 编码中显示输出时，我正在尝试更改变量/元素（名称、年龄和状态）的颜色。由于某种原因，输出没有出现。下面是代码：

<html>
    
<head>
    <script>
        function ageCalculator() {
            var name = document.getElementById("name").value;
            var birthdate = document.getElementById("dob").value;
            var dob = new Date(birthdate);
            var status;

            if(birthdate==null || birthdate=='') {
            document.getElementById("message").innerHTML = "<br><br>Choose a date properly!";  
            return false; 
            } else {
            
            var month_diff = Date.now() - dob.getTime(); 
            
            var age_date = new Date(month_diff); 
            
            var year = age_date.getUTCFullYear();
            
            var age = Math.abs(year - 1970);
        
            if (age<20)
            status = "You are still young!";
            else if (age>=20 && age<=25)
            status = "Now start thinking to have your own family!";
            else
            status = "Be responsible and care about others!";

            return document.getElementById("result").innerHTML =  
                    " Hello " + name.css('color','red') + "<br><br> You are " + age.css('color','red')  + " year-old" + "<br><br>" + status.css('color','red');
            

            }
        }
    </script>
</head>

<body>
    <center>
   
    <b> Enter your name : <input type="text" id="name" name="name" ><br><br>
    
 
    <b> Enter your birthday: <input type=date id = dob> </b>
    <span id = "message" style="color:darkred"> </span> <br><br>  

    <button type="submit" onclick = "ageCalculator()"> Submit </button> <br>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <h4 id="result" align="center"></h4>  
    </center>
</body>

</html>

这是输出示例： 在此处输入图像描述

标签： javascripthtml

解决方案

您可以在样式标签中添加一个 CSS 类，并在要应用样式的文本周围添加一个跨度标签。

在您的头部元素中添加以下样式标签。

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

现在，在 innerHTML 中，添加 span 标签并应用样式。

return document.getElementById("result").innerHTML =  
                " Hello <span class='txtColor'>" + name + "</span><br><br> You are <span class='txtColor'>" + age  + "</span> year-old" + "<br><br><span class='txtColor'>" + status + "</span>";

如果有帮助，请将此标记为答案。

推荐阅读