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

Question

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

Answer 1

你可以这样做:

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

这有2种变化,它现在使用.width()和.height(),以及运行在代码document.ready事件.

没有$(function() { })包装器(或者$(document).ready(function() { })如果你愿意的话),你的元素可能还没有出现,所以$("#mainTable")就找不到任何东西......好吧,做些什么. 你可以在这里看到一个有效的例子.

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

或使用此语法：

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

Answer 5

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

var modWidth = 250;
var modHeight = 150;

示例如下: -

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