如何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); 

你可以这样做:

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

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

如果没有$(function() { })包装器(或$(document).ready(function() { }) ),你的元素可能不存在,所以$("#mainTable")只会“find任何东西…好吧,做些东西。 你可以在这里看到一个工作的例子 。

由于@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()方法。

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

 var modWidth = 250; var modHeight = 150; 

下面的例子: –

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

尝试这个:

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

或者使用这个语法:

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

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

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

css方法做了同样的事情,所以我不得不使用$()。attr()方法。

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

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