将 HTML Select 标签字体颜色从 JavaScript 更改

Question

有没有办法从 HTML select 元素中获取选项的 style.color 值以这种形式或者是否有任何方法可以从 select 元素

内部获取特定子项的属性

注意：

当我将选项元素 ID 更改为 class 时，网站停止工作

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>

Answer 1

你是这个意思吗？

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>

Answer 2

首先，我建议为每个子节点设置唯一的 ID。然后，您可以使用这个唯一ID来获取颜色。

或者，更好的方法是为每个选项指定一个 class 名称。所以代码看起来是这样的。

<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>

请注意，每个选项标签都包含 class 而不是 ID。现在要获得特定选项，您可以这样做 -

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

您可以更改索引 - 在本例中 (0) 已用于获取不同的节点。

将 HTML Select 标签字体颜色从 JavaScript 更改

Change HTML Select tag font color from JavaScript

html

css

select

html-select

styling