How to set width and height dynamically using jQuery
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.
As @Misha Moroshko has already posted himself, this works:
$("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);
There's some advantage to this technique over @Nick Craver's accepted answer - you can also specifiy different units:
$("#mainTable").css("width", "100%");
So @Nick Craver's method might actually be the wrong choice for some users. From the jquery API (http://api.jquery.com/width/):
The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.