How to change css attribute of a class

Question

I have <span> inside a <div>, like so:

<div id="#mydiv">
<a href="#">Hello</a><span class="myImageArea"></span>
    <div class="someClass">
    </div>
</div>

With the following CSS:

.myImageArea {  
    background: url("../img/upArrow.png") no-repeat right 5px;
    display: inline-block;
    cursor: pointer;
}

I want to change the attribute background:url of class myImageArea

$('#mydiv').click(function() {
    //change the background image of the class
});

How can this be done?

cchana · Accepted Answer · 2012-04-04 07:57:59Z

5

Within the click function you get a reference to the element you've clicked on, using jQuery's selectors, you can now search inside that for the span. Once you have that you can then change the CSS property 'background-image':

$('#myDiv').click(function() {
    $('.myImageArea', this).css('background-image', 'newimagepath.png');
});

answered Apr 4, 2012 at 7:57

cchana

5,0123 gold badges36 silver badges45 bronze badges

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

3 Comments

Marco Johannesen Over a year ago

Voted up. Please state reason for downvoting...!

user1184100 Over a year ago

Thanks everyone. I want to have -> no-repeat scroll right 10px transparent with the image like .. 'background-image':'url("../img/xArrow.png") no-repeat scroll right 10px transparent' adding this won't work...

cchana Over a year ago

You can define the other attributes separately in your style sheet, then when jQuery changes the background image, these styles will get applied automatically.

Goran Nastov · Accepted Answer · 2012-04-04 08:08:12Z

4

Even better, instead of setting the attribute directly you can add custom CSS class (for ex. myFancyBackground). To add the class use following:

$('#myDiv').click(function() {
    $('.myImageArea', this).addClass('myFancyBackground');
});

And in the css file you have:

.myFancyBackground {
  background-image:url('...');
}

So in future, if you like to change the background properties, like image, repeating ... you only have to change the CSS.

answered Apr 4, 2012 at 8:08

Goran Nastov

9851 gold badge10 silver badges18 bronze badges

Comments

Andreas Wong · Accepted Answer · 2012-04-04 07:56:31Z

2

$('#mydiv').click(function() {
   $(this).find('.myImageArea').css('background-image', 'url("/path/to/new/image.jpg")');
});

answered Apr 4, 2012 at 7:56

Andreas Wong

60.7k19 gold badges112 silver badges123 bronze badges

Comments

Thomas Clayson · Accepted Answer · 2012-04-04 07:56:53Z

1

You can do this on the fly using the css() method in jQuery.

$('#mydiv').click(function(){
    $('.myImageArea', this).css({'background-image':'url(path/to/new/image.png)'});
});

answered Apr 4, 2012 at 7:56

Thomas Clayson

29.9k26 gold badges153 silver badges226 bronze badges

Collectives™ on Stack Overflow

How to change css attribute of a class

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related