如何用JavaScript修改HTML select标签字体颜色并获取option元素style属性值

首先你现有代码的核心问题是：HTML 中 id 属性全局唯一，你给所有 <option> 设置了相同的 id="continent-color"，导致document.getElementById("continent-color")只能匹配到第一个出现的option（也就是值为none、颜色为黄色的那个），无法拿到你选中的对应option的颜色。你尝试把id改成class后网站无法运行，是因为原有代码用了getElementById选择器，换成class后需要对应修改选择器逻辑，不过其实不需要给option额外加标识就能实现需求。

你要实现选中option后动态修改select字体颜色，直接监听select的change事件，通过select本身的options属性和selectedIndex属性拿到当前选中的option，读取它的style.color赋值给select即可，同时页面初始化时也设置一次初始选中项的颜色：

修改后的JS代码 #

let continentsSelect = document.getElementById("continent");

// 页面初始化时设置初始选中项的颜色
setSelectColor(continentsSelect);

// 监听select选中变化，动态更新颜色
continentsSelect.addEventListener('change', function () {
  setSelectColor(this);
});

// 复用的设置select颜色方法
function setSelectColor(selectEl) {
  // 拿到当前选中的option元素
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  // 将option的行内颜色赋值给select
  selectEl.style.color = selectedOption.style.color;
}

补充说明 #

• 如果要获取select下任意指定位置的option的属性，只要修改下标即可，比如获取第三个option的颜色：continentsSelect.options[2].style.color
• 如果一定要给option加class标识，把所有option的id="continent-color"改成class="continent-color"后，可以用document.querySelectorAll('.continent-color')拿到所有option节点，再对应做逻辑处理，不会出现运行报错。

内容的提问来源于stack exchange，提问作者Abdulrahman Azmy