javascript - how to add style to span like .attr('style', 'width:newWidth '); where newWidth is dynamic

Question

I have a code like below

var newWidth = Math.floor(width * .75) + 'px';
$(this).find("input:first").attr('style', 'width:newWidth ');

could you please correct me as what should be the right syntax as passing newWidth directly is not working also I have to do this via style only

Answer 1

Use .css()

$(this).find("input:first").css('width', newWidth);

Answer 2

You can use the css method for this:

$(this).find("input:first").css('width', <your dynamic value> + 'px');

Here is a link to the documentation.

Otherwise, if you must use attr you should be able to do this:

$(this).find("input:first").attr('style', 'width:' + <your dynamic value> + 'px');

Answer 3

As mentioned in another answer, you can use .css():

var newWidth = Math.floor(width * .75) + 'px';
$(this).find("input:first").css({
    width: newWidth
});

Or you can use .width(), since you are using px units:

var newWidth = Math.floor(width * .75);
$(this).find("input:first").width(newWidth);

Answer 4

You can try this .css("width","500px")

Answer 5

Try this

$(this).find("input:first").attr('style', 'width:'+newWidth+'px');