CODEWITHSUNDEEP
javascriptjquery
themhz
themhz

Reputation: 8424

How to edit the style attribute from an element with Jquery

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?

Upvotes: 0

Views: 3824

Answers (2)

Shyju
Shyju

Reputation: 218722

$(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/

Upvotes: 1

Karl Barker
Karl Barker

Reputation: 11341

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

Upvotes: 3

Related Questions