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?

enter image description here

Is there a reason why you want to fetch styles with `attr()` instead of `css()`? — Frédéric Hamidi, May 14 '13 at 17:22
refer http://api.jquery.com/css/ .You will get the solution there :) — Nishu Tayal, May 14 '13 at 17:26

score 26 · Accepted Answer · answered May 14 '13 at 17:23

26

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

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

answered May 14 '13 at 17:23

dwaddell

am i mistaken, or isn't it `background-color`? – May 14 '13 at 17:25
6

@Andreas: [it doesn't matter](http://jsfiddle.net/davidThomas/SLFnf/), they're both valid/equivalent under jQuery. – David Thomas May 14 '13 at 17:25
@AndreasNiedermair It's either, from the documentation: "Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) and .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'}). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name." – dwaddell May 14 '13 at 17:27
This is the answer what i want.Thanks @dwaddell. – Dilini Wasana May 14 '13 at 17:28
is there any better event that i can use with the colorpicker instead of mouseleave ? – Dilini Wasana May 14 '13 at 17:30
@DiliniWasana That's a whole different question and it depends on what you are trying to do, click, mousedown, mouseleave, etc. could be appropriate. – dwaddell May 14 '13 at 17:35
I'm going to change body background color when user tick the color from the data picker – Dilini Wasana May 14 '13 at 17:40

score 5 · Answer 2 · answered May 14 '13 at 17:24

5

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

answered May 14 '13 at 17:24

is there any better event that i use with the colorpicker instead of mouseleave ? – Dilini Wasana May 14 '13 at 17:34
@Zenith, lol. Dilini, it depends on what you need to do. What do you need it for? – Niccolò Campolungo May 14 '13 at 17:41
@DiliniWasana : you can jquery colorpicker plugin. http://www.eyecon.ro/colorpicker/ – Nishu Tayal May 14 '13 at 17:41

score 1 · Answer 3 · answered May 14 '13 at 17:23

1

I believe this should do the trick, replace your

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

With

$("body").attr('style', $(this).attr("style"));

That should change the style to whatever the style on the other object is.

answered May 14 '13 at 17:23

Cam

score 1 · Answer 4 · answered May 14 '13 at 17:24

1

You can use the $("#bgcolor").css("backgroundColor"); to obtain the colour.

answered May 14 '13 at 17:24

Klors

is there any better event that i use with the colorpicker instead of mouseleave ? – Dilini Wasana May 14 '13 at 17:32

score 1 · Answer 5 · answered May 14 '13 at 17:29

1

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

answered May 14 '13 at 17:29

Rajender Joshi

5 Answers5