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

我想div使用jQuery动态设置元素的宽度和高度。

我正在尝试更换

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

有了这个：

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

但是，它对我不起作用。

请帮助了解原因。

谢谢你们 ！

问题在于数字上的引号。这很好用：

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

你可以这样做：

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

这有2处更改，它现在使用.width()和.height()，并在document.ready事件上运行代码。

没有$(function() { })包装器（或$(document).ready(function() { })您愿意的话），您的元素可能还不存在，因此$("#mainTable")将找不到任何东西...好吧，做些什么。 您可以在此处看到一个有效的示例。

由于@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);
}) ;

我尝试下面的代码工作正常

var modWidth = 250;
var modHeight = 150;

下面的例子：

$( "#ContainerId .sDashboard li" ).width( modWidth ).height(modHeight);

或使用以下语法：

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

我尝试了上面的所有建议，但没有一个对我有用，它们更改了clientWidth和clientHeight而不是实际的宽度和高度。

用于$（）。width和height方法的jQuery文档说：“请注意，.width（“ value”）设置框的内容宽度，而不管CSS box-sizing属性的值如何。”

css方法做了同样的事情，因此我不得不使用$（）。attr（）方法。

_canvas.attr('width', 100);
_canvas.attr('height', 200);

我不知道这会影响我吗，因为我正尝试调整元素的大小，但它有多少不同。

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