Question

我想使用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);

Answer 1

你可以这样做：

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

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

如果没有$(function() { })包装（或$(document).ready(function() { })，如果您愿意），您的元素可能还没有出现，所以$("#mainTable")只是找不到任何东西......好吧，做东西给。 You can see a working example here

Answer 2

由于@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（）方法。

Answer 3

试试这个：

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

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

Answer 4

我尝试了以下代码，其工作正常

var modWidth = 250;
var modHeight = 150;

以下示例： -

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

Answer 5

或使用以下语法：

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

Answer 6

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

$（）。width和height方法的jQuery文档说：＆＃34;注意.width（＆＃34; value＆＃34;）设置框的内容宽度，而不管CSS框的值如何 - 大小的财产。＆＃34;

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

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

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

Answer 7

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

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

7 个答案: