CODEWITHSUNDEEP
jquery
user1184100
user1184100

Reputation: 6894

How to change css attribute of a class

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?

Upvotes: 0

Views: 8815

Answers (4)

Goran Nastov
Goran Nastov

Reputation: 985

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.

Upvotes: 4

cchana
cchana

Reputation: 4990

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

Upvotes: 5

Thomas Clayson
Thomas Clayson

Reputation: 29925

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

Upvotes: 1

Andreas Wong
Andreas Wong

Reputation: 60516

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

Upvotes: 2

Related Questions