How to edit the style attribute from an element with Jquery

Question

I need to edit the style attribute with jQuery. Here is what I am trying to do.

I have a div

<div style="background:url('images/image.png') no-repeat scroll 0 0 transparent;color:red;">
hello
</div>

and I need to change the background to something else like image2.png

How can I do this with jQuery?

Have you had a look at the jQuery documentation (that's the first place to start looking)? Especially the .css method. — Felix Kling
– Felix Kling, Commented Apr 21, 2012 at 19:01
possible duplicate of edit existing inline style using jquery? — Felix Kling
– Felix Kling, Commented Apr 21, 2012 at 19:02

Karl Barker · Accepted Answer · 2012-04-21 19:10:10Z

3

Use .css():

$('div').css('background', 'url(images/image2.png)')

To set your entire background string, you can use a property map:

var cssObj = {
  'background-image': 'url(images/image2.png)',
  'background-repeat': 'no-repeat',
  'background-attachment': 'scroll',
  'background-position': '0 0',
  'background-color': 'transparent'
}
$('div').css(cssObj);

edited Apr 21, 2012 at 19:10

answered Apr 21, 2012 at 19:02

Karl Barker

11.5k3 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ohgodwhy Over a year ago

He has a string there, for his background properties. Could you show him the difference between .css() and .css({});?

themhz Over a year ago

Thank you, and if you tell me also how to remove it it will be helpfull, or else i will make another question about that, without touching the color?

Felix Kling Over a year ago

@themhz: color is a different property and will not be affected by setting the background property. I suggest to have a look at the documentation for more information/examples.

Karl Barker Over a year ago

Added in using .css({}). As @FelixKling said, this will not affect the color property at all.

Shyju · Accepted Answer · 2012-04-21 19:10:56Z

1

$(function(){
   var cssObj = {
      'background-image' : 'url(http://www.mousescrappers.com/forums/xperience/icons/teacups24.png)',
      'background-repeat' : 'no-repeat',      
    }
   $("div").css(cssObj);
});

The above script loads image on the document ready. Note that it loads for all Div's. So you better be more specific about the element ( use Id or class as selector)

Example http://jsfiddle.net/XsRuC/9/

answered Apr 21, 2012 at 19:10

Shyju

220k106 gold badges421 silver badges499 bronze badges

Collectives™ on Stack Overflow

How to edit the style attribute from an element with Jquery

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related