在选择框中更改所选选项的文本颜色
在选择框中更改所选选项的文本颜色
我有一个选择框。通过引用的CSS文件,选项已经用不同的颜色进行了样式设置。我希望能够选择一个选项,并将关闭的选择框的文本颜色更改为所选选项的颜色。
所以如果我选择了香蕉,文本应该从黄色变为红色。
我尝试了以下方法:
onchange="this.style.color = this.options[this.selectedIndex].style.color;"
但是这只适用于在HTML文档中选项标签内定义样式。
我还尝试了JavaScript:
function setSelectColor(thisElement){ var thisElem = document.getElementById(thisElement); var thisOption = thisElem.options[thisElem.selectedIndex]; var newColor = getStyle(thisOption,"color"); alert("新颜色:"+ newColor); }
但是这总是返回颜色:白色。getStyle函数在我其他地方使用时都有效,所以我不认为那是问题。
我从这个网站上获取了getStyle函数:
function getStyle(oElm, strCssRule){ var strValue = ""; if(document.defaultView && document.defaultView.getComputedStyle){ strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); } else if(oElm.currentStyle){ strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ return p1.toUpperCase(); }); strValue = oElm.currentStyle[strCssRule]; } return strValue; }
如何使用JavaScript解决这个问题?