Question

我的网络应用程序中有一个转发器控件，它包含一个下拉列表，我在change事件上操纵这个下拉行为（通过添加一些自定义样式）。问题是，当我使用jquery css属性获取背景颜色值时，它返回的是先前设置但未更新的值。但奇怪的是，当我使用attr属性获取样式属性时，它给了我正确的输出，但显然我无法使用它，因为我需要特定的样式。

这是我呈现的下拉列表： -

 <select name="ct100$rptCurrentData$ct101$ddlIncludeData" class="clsTypes"
     id="ctl00_rptCurrentDatas_ddlIncludeData_0" style="background-color: transparent;">
     <option style="background-color: transparent;" value="-1">Select</option>
     <option style="background-color: transparent;" value="1">Activity</option>
     <option style="background-color: rgb(231, 251, 189);" value="2">Proposal</option>
     <option style="background-color: transparent;" value="3">Both</option>
 </select>

我使用以下方法覆盖所选下拉列表的背景颜色： -

$(this).find('option:selected').css("backgroundColor", '#E7FBBD');`

正如我们在呈现的HTML中看到的那样，它正在更新。但我的问题是在检索相同内容时，我使用.attr("style")得到了正确的价值，但却没有得到.css为什么？

$(this).find('option:selected').css('background-color'));  //Output-rgb(10, 36, 106)
$(this).find('option:selected').css('backgroundColor')); //Output-rgb(10, 36, 106)
$(this).find('option:selected').attr("style")); 
//Output- background-color: rgb(231, 251, 189);

Answer 1

在这两种情况下，您都获得了正确的价值。问题是＆＃39;背景颜色＆＃39;总是给'rgb＆＃39;使用的颜色值。查看下面的链接。

https://jsfiddle.net/cq3ow57h/3/

$('select').find('option[value="3"]').css("background-color", 'red');

$('select').on('change',function(){
 alert($(this).find('option:selected').css('backgroundColor'));//Output-rgb(10, 36, 106));
 // $(this).find('option:selected').css('backgroundColor')); //Output-rgb(10, 36, 106);

alert($(this).find('option:selected').attr("style")); 

});

如果你想要十六进制代码值而不是RGB，那么你必须转换它。 How to get hex color value rather than RGB value?

Answer 2

我可能有一个解决方案。如果以某种方式为颜色更改设置动画，则.css（）在动画完成之前不会更改。和.attr（）为您提供改变的颜色。看到没有动画的差异

jQuery css属性没有检索到正确的值

2 个答案: