通过jQuery修改CSS

Question

I want to change two properties of a css, One property Value I want to modify using function call and other one is direct property assigning. I want to add background image at run time and setting property no repeat as well. Following two functions i came to know:

$(selector).css(property,function(index,currentvalue)) for changing value by function call and   other one is :-
$(selector).css({property:value, property:value, ...}) for assigning property.

Here I have two properties One is by function call and other one is direct property. I tried following code:

$('.xl21684').css('background-image', function () {
return 'url(' + imgs[parseInt(this.innerHTML)] + ')'
})
 $('.xl21684').css({background-repeat: no-repeat}) 

But it's not working at all.

Answer 1

If you would like to go your own way then don't forget to quote the property and value for proper result as @Cerbrus said:

('.xl21684').css({'background-repeat': 'no-repeat'});

But you can try just once too:

$('.xl21684').css('background', function () {
return 'url(' + imgs[parseInt(this.innerHTML)] + ') no-repeat';
});

---

As per your comment you can use background shorthand property like below:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

Answer 2

The first .css() seems to be fine. The second one just needs some quotes:

$('.xl21684').css({"background-repeat": "no-repeat"});
//                 ^                 ^  ^         ^

That should work.