问如何使用jQuery动态设置宽度和高度

EN

您可以这样做：

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

这有两个变化，它现在使用.width()和.height()，以及在document.ready事件上运行代码。

如果没有$(function() { })包装器(或者$(document).ready(function() { })，如果你喜欢)，你的元素可能还不存在，所以$("#mainTable")不会找到任何东西to...well，做一些事情。You can see a working example here。

正如@Misha Moroshko已经发布了自己的帖子，这是有效的：

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

与@Nick Craver接受的答案相比，这种技术有一些优势-你也可以指定不同的单元：

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

因此，对于某些用户来说，@Nick Craver的方法实际上可能是错误的选择。在jquery API (http://api.jquery.com/width/)中：

.css(width)和.width()之间的区别在于，后者返回的是没有单位的像素值(例如，400)，而前者返回的是单位保持不变的值(例如，400px)。当需要在数学计算中使用元素的宽度时，建议使用.width()方法。

试试这个：

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

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