Modify css by Jquery

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.

What error messages do you have in the console? (the second on will give you a syntax error) — t.niese
– t.niese, Commented May 13, 2014 at 11:43
{background-repeat: no-repeat} is a syntax error. Try { "background-repeat": "no-repeat" } instead, or pass two strings to css() instead of an object. — Frédéric Hamidi
– Frédéric Hamidi, Commented May 13, 2014 at 11:43

Bhojendra Rauniyar · Accepted Answer · 2014-05-14 03:29:28Z

3

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

edited May 14, 2014 at 3:29

answered May 13, 2014 at 11:46

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

2 Comments

yagyavrat Over a year ago

@C-link, What if I want to do background-position:center ?

Bhojendra Rauniyar Over a year ago

...no-repeat center';

Cerbrus · Accepted Answer · 2014-05-13 11:43:54Z

1

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

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

That should work.

answered May 13, 2014 at 11:43

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Collectives™ on Stack Overflow

Modify css by Jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related