在选择框中更改所选选项的文本颜色

16 浏览
0 Comments

在选择框中更改所选选项的文本颜色

我有一个选择框。通过引用的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解决这个问题?

0