jQuery css property not retrieving correct value

Question

I have a repeater control in my web app which consists of a dropdown, I am manipulating this dropdown behaviour (by adding some custom styles) on the change event. The problem is when I am using the jquery css property to fetch the background-color value it is returning me the value which was set earlier but not the updated value. But the strange thing is when i am using the attr property to get the style attribute, it is giving me the correct output but obviously I can't use that because i need specific style.

Here is my rendered dropdown:-

 <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>

I am overwriting the background-color of selected dropdown using:-

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

And as we can see in the rendered HTML, it is updating fine. But my problem is while retrieving the same, I am getting correct value with .attr("style") but not with .css Why?

$(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);

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

You are getting correct value in both cases. Problem is 'background-color' always gives 'rgb' value of color used. Check link below.

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")); 

});

If you want hex code value instead of RGB then you have to convert it. How to get hex color value rather than RGB value?

edited May 23 '17 at 12:14

Community

1
1

answered Apr 28 '15 at 07:21

Vinita Rathore

542
3
12

Nope, this is not the case. It's not about `rgb`, I am fine with that. I have clearly explained my problem, it is fetching wrong `rgb` when i am using css. – Rahul Singh Apr 28 '15 at 07:25
1

Check this link. https://jsfiddle.net/cq3ow57h/3/. It clearly shows the updated value. – Vinita Rathore Apr 28 '15 at 07:30
Yeah I agree, but it is not working for me and I just can't rely on fiddle. It may be an issue with IE 11 who knows, cz the code is fine. – Rahul Singh Apr 28 '15 at 08:39

score 0 · Answer 2 · answered Apr 28 '15 at 07:29

0

I might have a solution for that. If you animate somehow the color change the .css() will not change until the animation will be completed. and .attr() gives you the changed color right aaway. see the difference without animation

answered Apr 28 '15 at 07:29

Luke

362
1
4
13

jQuery css property not retrieving correct value

2 Answers2