嘿，我想知道是否有一種方法可以讓用戶使用您提供的選項來選擇顏色/顏色？我知道有一種方法可以讓用戶選擇他們選擇的顏色/顏色，但是有沒有一種方法可以讓用戶只給用戶三個改變背景顏色/顏色的選項？例如，假設我希望用戶只能在黑色和藍色之間進行選擇，我將如何撰寫代碼？
這是我試過的：
網頁：
<div class="colour selector">
Pick a color <input onchange="colorSelected(this)" type="color">
</div>
JavaScript 頁面：
function colorSelected (element) {
document.body.style.background = element.value
}
但我希望能夠為用戶提供有限的選項，比如只有三種顏色（紅色、藍色和黃色）
uj5u.com熱心網友回復：
let select = document.getElementById("select");
let text = document.getElementById("text");
select.onclick = function() {
switch (select.value){
case "red":
text.style.color = "red";
select.style.backgroundColor = "red";
break;
case "pink":
text.style.color = "pink";
select.style.backgroundColor = "pink";
break;
case "blue":
text.style.color = "blue";
select.style.backgroundColor = "blue";
break;
}
}.color1{
background-color:red;
}
.color2{
background-color:pink;
}
.color3{
background-color:blue;
}<select id="select">
<option hidden selected value="">Choose a color</option>
<option value="red" class="color color1"></option>
<option value="pink" class="color color2"></option>
<option value="blue" class="color color3"></option>
</select>
<p id="text">Some text</p>編輯版本
uj5u.com熱心網友回復：
為每個選擇使用帶有選項的選擇。
在將事件物件作為引數傳遞的 eventListener 中使用您的函式，以便您可以從選擇（即event.target）中獲取值：
const mySelect = document.getElementById("my-select");
mySelect.addEventListener("change", colorSelected);
function colorSelected(event) {
document.body.style.background = event.target.value
}<select id="my-select">
<option value="pick" hidden>Pick a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/535183.html