如何dynamic使用jQuery设置宽度和高度

我想使用jQuerydynamic设置div元素的宽度和高度。

我试图replace

 <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")只会“find任何东西…好吧，做些东西。 你可以在这里看到一个工作的例子 。

Answer 2

由于@Misha Moroshko已经张贴自己，这工作：

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

与@Nick Craver接受的答案相比，这项技术有一些优势 – 您也可以指定不同的单位：

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

所以@Nick Craver的方法实际上可能是某些用户的错误select 。 从jquery API（ http://api.jquery.com/width/ ）：

.css（width）和.width（）之间的区别在于后者返回一个无单位像素值（例如400），而前者返回一个单位完整的值（例如400px）。 当需要在math计算中使用元素的宽度时，build议使用.width（）方法。

Answer 3

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

 var modWidth = 250; var modHeight = 150; 

下面的例子： –

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

Answer 4

尝试这个：

 <div id="mainTable" style="width:100px; height:200px;"></div> $(document).ready(function() { $("#mainTable").width(100).height(200); }) ; 

Answer 5

或者使用这个语法：

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

Answer 6

我尝试了上面所有的build议，没有一个为我工作，他们改变了客户端宽度和clientHeight不是实际的宽度和高度。

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

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

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

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