更改HTML從JavaScript中選擇標簽字體顏色-有解無憂

有什么方法style.color可以從這種表單中的 HTML 選擇元素內部獲取選項的值，或者有什么方法可以從該選擇元素內部獲取特定子元素的屬性

注意：

當我將選項元素 id 更改為類時，網站停止作業

let continentsSelect = document.getElementById("continent");
let countriesSelect = document.getElementById("country");
let continentColor = document.getElementById("continent-color");

continentsSelect.style.color = continentColor.style.color

<select name="continent" id="continent">
  <option id="continent-color" value="none" style="color: yellow;">???? ????</option>
  <option id="continent-color" value="africa" style="color: green;">???????</option>
  <option id="continent-color" value="asia" style="color: green;">????</option>
  <option id="continent-color" value="europe" style="color: green;">?????</option>
  <option id="continent-color" value="northAmirca" style="color: green;">?????? ????????</option>
  <option id="continent-color" value="southAmirca" style="color: green;">?????? ????????</option>
  <option id="continent-color" value="oceania" style="color: green;">????????????</option>
</select>

uj5u.com熱心網友回復：

你是這個意思嗎？

ID 必須是唯一的，我們不會為選項設定樣式或為其提供 ID

const changeColor = (sel) => {
  sel.className = "";
  sel.classList.add(sel.value);
};
let continentsSelect = document.getElementById("continent");
continentsSelect.addEventListener("change",function() { changeColor(this)})
changeColor(continentsSelect)

.none { color: yellow }
.africa { color: green; }
.asia { color: red; }
.europe{ color: blue; }
.northAmerica { color: purple; }
.southAmerica { color: teal; }
.oceania{ color: orange; }

<select name="continent" id="continent" class="none">
  <option value="none">???? ????</option>
  <option value="africa">???????</option>
  <option value="asia">????</option>
  <option value="europe">?????</option>
  <option value="northAmerica">?????? ????????</option>
  <option value="southAmerica">?????? ????????</option>
  <option value="oceania">????????????</option>
</select>

uj5u.com熱心網友回復：

首先，我建議每個子節點都有唯一的 ID。然后，您可以使用此唯一 ID 來獲取顏色。

或者，更好的方法是為每個選項分配一個類名。所以代碼看起來是這樣的。

<select onclick="run()" name="continent" id="continent">
                <option class="continent-color" value="none"style="color: yellow;">???? ????</option>
                <option class="continent-color" value="africa" style="color: green;">???????</option>
                <option class="continent-color" value="asia"   style="color: green;">????</option>
                <option class="continent-color" value="europe" style="color: green;">?????</option>
                <option class="continent-color" value="northAmirca" style="color: green;">?????? ????????</option>
                <option class="continent-color" value="southAmirca" style="color: green;">?????? ????????</option>
                <option class="continent-color" value="oceania" style="color: green;">????????????</option>
            </select>

請注意，每個選項標簽都包含一個類而不是一個 ID。現在要獲得特定選項，您可以這樣做 -

const options = document.getElementsByClassName('continent-color')
const option1 = options[0]; // Returns the first of the option tags
const option1Color = options1.style.color;

您可以更改索引 - 在這種情況下 (0) 已用于獲取不同的節點。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346562.html

標籤：html css 选择 html-选择造型

上一篇：帶圓角的元素-如何檢測特定元素以賦予它們特殊的樣式？

下一篇：下拉選擇材質ui的位置