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

【问题标题】：How to set width and height dynamically using jQuery如何使用jQuery动态设置宽度和高度
【发布时间】：2010-04-27 14:31:48
【问题描述】：

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

【问题讨论】：

您的代码看起来不错。如果您发布更多 JavaScript 代码可能会有所帮助，为我们提供更多背景信息。
嗨，米莎，我认为你的代码没问题，如果你写双引号我试过你的示例，它在两种情况下给出相同的结果试试这个jsfiddle.net/AUVs7/2
您的代码不起作用！
中定义的 100px 宽度不会被 .css() 中的 width=200px 覆盖！

标签： jquery html

【解决方案1】：

你可以这样做：

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

这有 2 个变化，它现在使用 .width() 和 .height()，并在 document.ready 事件上运行代码。

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

【讨论】：

【解决方案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() 方法。

【讨论】：

没有尼克的评论是正确的。您正在设置 css，而不是内联样式

【解决方案3】：

试试这个：

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

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

【讨论】：

【解决方案4】：

或使用以下语法：

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

【讨论】：

【解决方案5】：

我尝试了下面的代码，效果很好

var modWidth = 250;
var modHeight = 150;

下面的例子：-

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

【讨论】：

【解决方案6】：

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

$().width 和 height 方法的 jQuery 文档说：“请注意，.width("value") 设置框的内容宽度，而不考虑 CSS box-sizing 属性的值。”

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

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

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

【讨论】：

【解决方案7】：

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

【讨论】：

您好，您的回答看起来不错，但没有给出任何解释为什么它不同以及为什么有效。如果您能解释您所做的更改以及更改的原因，这对我们所有人都有帮助。