Is there a way to add variable to jquery css method?

Question

is there any way to replace 255px from code below with variable width?

var width = $(".input-textbox").width();

     $("#txtTryContactMob").css('background', '#fff url(\"/img/erroricon.png\") 255px center no-repeat');

I have read a little about it and I don't want to use LESS css.

Thanks in advance.

'#fff url(\"/img/erroricon.png\") '+width+'px center no-repeat'? Have you tried string concatenation? — Karl-André Gagnon
– Karl-André Gagnon, Commented Feb 9, 2015 at 14:22
Yes but a different way :) looks like I made a mistake, will try your solution. — Sheil
– Sheil, Commented Feb 9, 2015 at 14:23
Note: You did not need to escape the double-quotes inside a single-quoted string — iCollect.it Ltd
– iCollect.it Ltd, Commented Feb 9, 2015 at 14:25

iCollect.it Ltd · Accepted Answer · 2015-02-09 14:29:49Z

1

You can also separate the width from the rest of the CSS style by specifically targetting just the background-size style:

 var width = $(".input-textbox").width();
 $("#txtTryContactMob").css('background', '#fff url("/img/erroricon.png") 255px center no-repeat')
      .css('background-size', width);

Notes:

it does not need the px added when using a single CSS property.
You did not need to escape the double-quotes inside a single-quoted string

answered Feb 9, 2015 at 14:29

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

Comments

Sajad Karuthedath · Accepted Answer · 2015-02-09 14:25:29Z

1

you can use like this by simple concatenation

var customwidth = $(".input-textbox").width();
     $("#txtTryContactMob").css('background', '#fff url(\"/img/erroricon.png\") '+customwidth+'px center no-repeat');

answered Feb 9, 2015 at 14:25

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

Comments

coderz · Accepted Answer · 2015-02-09 14:57:32Z

1

To reply your question, "How to add variable to jquery css method?", maybe hash format css looks more expandable:

$("#txtTryContactMob").css({
  "background": '#fff url("/img/erroricon.png") center',
  "background-size": $(".input-textbox").width() + "px",
  "background-repeat": "no-repeat",
  "background-position": "center"
  // more attribute pairs
});

See http://www.w3schools.com/css/css_background.asp for more background details.

answered Feb 9, 2015 at 14:57

coderz

5,01912 gold badges53 silver badges80 bronze badges

Collectives™ on Stack Overflow

Is there a way to add variable to jquery css method?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related