更改 HTML 从 JavaScript 中选择标签字体颜色答案

【问题标题】：Change HTML Select tag font color from JavaScript更改 HTML 从 JavaScript 中选择标签字体颜色
【发布时间】：2021-12-17 22:29:04
【问题描述】：

有没有办法从 HTML 选择元素中获取选项的 style.color 值以这种形式，或者是否有任何方法可以从该选择元素内部获取特定子项的属性

注意：

当我将选项元素 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>

【问题讨论】：

id 必须是唯一的，使用 data-attribute 或 class 代替。

标签： html css select html-select styling

【解决方案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>

【讨论】：

【解决方案2】：

首先，我建议为每个子节点设置唯一的 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) 已用于获取不同的节点。

【讨论】：

不建议按类名获取选项