JavaScriptでユーザー入力値（プロンプト）のフォントの色を変更するにはどうすればよいですか？

bugfix> javascript > 投稿

変数番号の値の色を変更するにはどうすればよいですか（ 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>

javascript

html

css

回答 1 件

  • 以下のコードは、2つの方法を示しています。

    でスパンを作成することによって colored そのクラスとして、それはそれを青に変えます。

    その後、私のコードでは、javascriptを使用して赤に変えることでそれをオーバーライドしています。

    これらの方法のいずれかが機能しますが、必要なのは1つだけで、両方は必要ありません。私はあなたのオプションを説明するためだけに両方を使用しました。

    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>

あなたの答え

関連記事