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

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

我想找人代替

<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);
297303 次浏览
小开

试试这个:

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


$(document).ready(function() {
$("#mainTable").width(100).height(200);
}) ;
小开
最佳答案

你可以这样做:

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

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

如果没有 $(function() { })包装器(或者 $(document).ready(function() { })，如果您喜欢的话) ，您的元素可能还没有出现，所以 $("#mainTable")不会找到任何东西来..。您可以在这里看到一个工作示例.

小开

或使用以下语法:

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

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

JQuery 为 $()编写文档。Width 和 height 方法说: “请注意。Width (“ value”)设置框的内容宽度，而与 CSS 框大小属性的值无关

Css 方法做了同样的事情，所以我不得不改用 $() . attr ()方法。

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

我不知道这是否会影响我，因为我试图调整一个元素的大小，它是否有些不同。

小开

我尝试下面的代码，它的工作很好

var modWidth = 250;
var modHeight = 150;

例子如下:-

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

正如@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 ()是后者返回一个无单位像素值(例如400) ，而前者返回一个单位完整的值(例如400px)。那个。当需要在数学计算中使用元素的宽度时，建议使用 width ()方法。

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

提交答案