How do I get the background-color value?

Question

<input class="color" value="66ff00" id="fc" autocomplete="off" style="background-image: none; background-color: rgb(128, 225, 255); color: rgb(0, 0, 0);">

How can I get the value of the background-color?

Everytime I use (element).attr("background-color"), it doesn't work. I suppose it has to do with style="background-color".

Answer 1

We can use .css property to get specific css value using id or class selector.

$("#fc").css('background-color') // fc is the id for the control

or

$(".color").css('background-color') //color is the class applied here

Answer 2

Try this:

$("input.color").css("background-color"); 

It will return you the specified background-color.

and then do this to get the result:

var color = $("input.color").css("background-color"); 

$("$target_element").css("background-color", color);

Answer 3

It will work you will get the backround color of #fc

var fc = document.getElementById('fc');
var bgcolor = fc.style.backgroundColor;

Answer 4

Use this it will work..

<script>
$( document ).ready(function() {
alert($("#fc").css('background-color'));
});
</script>

<input class="color" value="66ff00" id="fc" autocomplete="off" style="background-image: none; background-color: rgb(128, 225, 255); color: rgb(0, 0, 0);">

Answer 5

If you want to get any css property in jQuery then use

$(selector).css(property);

Here, in this case it is $("#fc").css('background-color');

Answer 6

Use the .css method to fetch the background colour, ie:

$(element).css('background-color');

You may also access it without quoting, using the object:

$(element).css(bgColor);

Answer 7

Try:

(element).css("background-color");

Hope it helps.

Thanks

Answer 8

You can access any css property via css:

$(".color").css('background-color')

Jsfiddle