如何在 JavaScript 中更改用户输入值（提示）的字体颜色？

Question

如何更改变量编号 ( nb ) 的值的颜色？ 如何在 JavaScript 中更改用户输入值（提示）的字体颜色？


<html>
    <head>
        <style>
            #block{
                color: white;
                width: 300px;
                height: 60px;
                background-color: #2b2e2e;
                text-align: center;
                padding-top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="block">
            
        </div>
        <script>
            window.onload = function printNumber(){
                var unBlock = document.getElementById("block");
                var nb = Number(prompt("Saisir un nombre: "));
                
                if(nb == null || nb == ""){
                    unBlock.innerHTML = "No input number.";
                }else{
                    unBlock.innerHTML = "Your input number is "+nb;
                }
                
            }
        </script>
    </body>
</html>

Answer 1

下面的代码说明了两种方式。

通过创建一个带有colored作为其类的跨度，它会变成蓝色。
随后，在我的代码中，我通过使用 javascript 将其变为红色来覆盖它。

这两种方法中的任何一种都可以使用，但您只需要一种，而不是两种都需要。 我使用两者只是为了说明您的选择。

 window.onload = function printNumber() { var unBlock = document.getElementById("block"); var nb = Number(prompt("Saisir un nombre: ")); if (nb == null || nb == "") { unBlock.innerHTML = "No input number."; } else { unBlock.innerHTML = `Your input number is <span class='colored'>${nb}</span>`; //the next line will select your span and override blue with red. document.querySelector("span.colored").style.color = 'red'; } }

 #block { color: white; width: 300px; height: 60px; background-color: #2b2e2e; text-align: center; padding-top: 30px; } span.colored { color: blue; }

 <div id="block"> </div>

如何在 JavaScript 中更改用户输入值（提示）的字体颜色？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-11-19 16:46:19

如何在 JavaScript 中更改用户输入值（提示）的字体颜色？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-11-19 16:46:19

解决方案1
2 已采纳 2020-11-19 16:46:19