1. ホーム
  2. javascript

[解決済み] ボーダーカラー変更 Javascript

2022-02-16 03:18:53

質問

こんにちは、私は非常にHTMLとJavascriptの初心者です。私は、ユーザーがボーダーの色を変更するために色を入力できるプロンプトを作成しようとしています。
以下は、私がこれまでに作成したコードです。

<script>
    var getColor = prompt("Choose your color ", "Enter the  color ");
    var color;
    var el = document.getElementById("color");
   el.innerHTML = "Whatever paragraph message.";
    if (getColor == "Yellow" || getColor == "yellow" || getColor == "YELLOW") {
        color = "#FFFF66";
        el.style.borderColor = color;
    }
    else if (getColor == "Orange" || getColor == "orange" || getColor == "ORANGE") {
        color = "#FF9900";
        el.style.borderColor = color;
    }
    else if (getColor == "Purple" || getColor == "purple" || getColor == "PURPLE") {
        color = "#6600CC";
        el.style.borderColor = color;
    }

解決方法は?

あなたのスニペットを修正し、動作するようにしました。HTML要素のstyle.borderColorにアクセスすればいいだけです。

    私が変更したこと:
  • #borders は id="borders" 用なので、.borders に変更し、CSS クラス borders をあなたの

    要素

  • solid' の値は、border-style プロパティのためのものです。
  • promptUser'変数が存在しないので、静的テキストで変更しました。

お役に立てれば幸いです。

 var getColor = prompt("Choose your color ", "Enter the  color ");
 var color;
 var el = document.getElementById("color");
 el.innerHTML = "Whatever paragraph message.";
 if (getColor =="Yellow" || getColor =="yellow" || getColor =="YELLOW"){
     color = "#FFFF66";
     el.style.borderColor = color;
 }
 
.borders{
    background-color:#00ffff;
    border-color:#000000;
    border-width:2px;
    border-style:solid;
}
 
<p id="color" class="borders"></p>