jQuery 如何使用jQuery动态设置宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2722068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set width and height dynamically using jQuery
提问by Misha Moroshko
I would like to set the width and the height of the divelement dynamically using jQuery.
我想div使用 jQuery 动态设置元素的宽度和高度。
I was trying to replace
我试图更换
<div id="mainTable" style="width:100px; height:200px;"></div>
with this:
有了这个：
$("#mainTable").css("width", "100");
$("#mainTable").css("height", "200");
but, it does not work for me.
但是，它对我不起作用。
Please help to understand why.
请帮助理解原因。
Thank you all !
谢谢你们 ！
The problem was with the quotation marks on numbers. This works fine:
问题在于数字上的引号。这工作正常：
$("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);
回答by Nick Craver
You can do this:
你可以这样做：
$(function() {
$("#mainTable").width(100).height(200);
});
This has 2 changes, it now uses .width()and .height(), as well as runs the code on the document.readyevent.
这有 2 个变化，它现在使用.width()和.height()，以及在document.ready事件上运行代码。
Without the $(function() { })wrapper (or $(document).ready(function() { })if you prefer), your element may not be present yet, so $("#mainTable")just wouldn't find anything to...well, do stuff to. You can see a working example here.
如果没有$(function() { })包装器（或者$(document).ready(function() { })如果您愿意），您的元素可能还不存在，所以$("#mainTable")只是找不到任何东西......好吧，做些事情。 您可以在此处查看工作示例。
回答by DomTomCat
As @Misha Moroshko has already posted himself, this works:
正如@Misha Moroshko 已经张贴自己，这有效：
$("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);
There's some advantage to this technique over @Nick Craver's accepted answer - you can also specifiy different units:
与@Nick Craver 接受的答案相比，这种技术有一些优势 - 您还可以指定不同的单位：
$("#mainTable").css("width", "100%");
So @Nick Craver's method might actually be the wrong choicefor some users. From the jquery API (http://api.jquery.com/width/):
所以@Nick Craver 的方法对于某些用户来说实际上可能是错误的选择。来自 jquery API ( http://api.jquery.com/width/)：
The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.
.css(width) 和 .width() 之间的区别在于，后者返回一个无单位的像素值（例如，400），而前者返回一个单位完整的值（例如，400px）。当需要在数学计算中使用元素的宽度时，建议使用 .width() 方法。
回答by Amr Elnashar
Try this:
尝试这个：
<div id="mainTable" style="width:100px; height:200px;"></div>
$(document).ready(function() {
$("#mainTable").width(100).height(200);
}) ;
回答by user3867268
I tried below code its worked for fine
我试过下面的代码它工作得很好
var modWidth = 250;
var modHeight = 150;
example below :-
下面的例子：-
$( "#ContainerId .sDashboard li" ).width( modWidth ).height(modHeight);
回答by mRizvandi
or use this syntax:
或使用此语法：
$("#mainTable").css("width", "100px");
$("#mainTable").css("height", "200px");
回答by KrisTC
I tried all of the suggestions above and none of them worked for me, they changed the clientWidth and clientHeight not the actual width and height.
我尝试了上面的所有建议，但没有一个对我有用，他们更改了 clientWidth 和 clientHeight 而不是实际的宽度和高度。
The jQuery docs for $().width and height methods says: "Note that .width("value") sets the content width of the box regardless of the value of the CSS box-sizing property."
$().width 和 height 方法的 jQuery 文档说：“请注意，.width("value") 设置框的内容宽度，而不管 CSS box-sizing 属性的值如何。”
The css approach did the same thing so I had to use the $().attr() methods instead.
css 方法做了同样的事情，所以我不得不改用 $().attr() 方法。
_canvas.attr('width', 100);
_canvas.attr('height', 200);
I don't know is this affect me because I was trying to resize a element and it is some how different or not.
我不知道这对我有没有影响，因为我试图调整一个元素的大小，它有多少不同。
