How to get the style value using attr

Question

My HTML CODE HERE:

 <i id="bgcolor" style="background-color: rgb(255, 146, 180)"></i>

I want to get the background-color value using jquery attr. What i tried is below:

$("#bgcolor").mouseleave(function(){
        var bodyColor = $(this).attr("style");

        $("body").css(bodyColor);
    });

But this output is:

background-color: rgb(255, 146, 180);

And now that I've added it to my css it will not work. How can I achieve this task?

Answer 1

Check out the documentation for .css: http://api.jquery.com/css/

var bodyColor = $(this).css("backgroundColor");

Answer 2

This is what you are looking for(this code works):

$("#bgcolor").mouseleave(function(){
    var bodyColor = $(this).attr("style");
    $("body").attr("style", bodyColor);
});

But, instead of using attr you should use css, so the code will be:

$("#bgcolor").mouseleave(function(){
    var bodyColor = $(this).css("background-color");
    $("body").css("background-color", bodyColor);
});

JSFiddle