How to set width and height dynamically using jQuery

Question

I would like to set the width and the height of the div element dynamically using jQuery.

I was trying to replace

<div id="mainTable" style="width:100px; height:200px;"></div>

with this:

$("#mainTable").css("width", "100");
$("#mainTable").css("height", "200");

but, it does not work for me.

Please help to understand why.

Thank you all !

The problem was with the quotation marks on numbers. This works fine:

$("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);

Answer 1

Try This

<div id="mainTable" style="width:100px; height:200px;"></div> 

$(document).ready(function() {
  $("#mainTable").width(100).height(200);
}) ;

I hope it can helps you.

Answer 2

You can do this:

$(function() {
  $("#mainTable").width(100).height(200);
});

This has 2 changes, it now uses .width() and .height(), as well as runs the code on the document.ready event.

Without the $(function() { }) wrapper (or $(document).ready(function() { }) if you prefer), your element may not be present yet, so $("#mainTable") just wouldn't find anything to...well, do stuff to. You can see a working example here.