[解決済み] ボーダーカラー変更 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>
関連
-
[解決済み] テスト
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】Vueが定義されていない
-
[解決済み】module.exports "モジュールが定義されていません"