blocks|key|309099|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|309100|<div+id="mainTable"+style="width:100px;+height:200px;"></div>+

$(document).ready(function()+{
++$("#mainTable").width(100).height(200);
})+;|code-block|syntax|javascript|309101|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>&lt;div id="mainTable" style="width:100px; height:200px;"&gt;&lt;/div&gt; 

$(document).ready(function() {
 $("#mainTable").width(100).height(200);
}) ;
</code></pre>

blocks|key|3047325|text|您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3047326|$(function()+{
++$("#mainTable").width(100).height(200);
});|code-block|syntax|javascript|3047327|这有两个变化，它现在使用.width()和.height()，以及在document.ready事件上运行代码。|offset|length|style|CODE|3047328|如果没有$(function()+{+})包装器(或者$(document).ready(function()+{+})，如果你喜欢)，你的元素可能还不存在，所以$("#mainTable")不会找到任何东西to...well，做一些事情。You+can+see+a+working+example+here。|3047329|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/width/|1|http://api.jquery.com/height/|2|http://jsfiddle.net/kKH7v/^0|0|0|C|8|L|9|Y|E|C|8|0|L|9|1|0|4|H|R|X|29|F|3C|Y|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]|$I|15|J|16|K|L]|$I|17|J|18|K|L]]|9|@$I|19|J|1A|1|1B]|$I|1C|J|1D|1|1E]]|A|$]]|$1|M|3|N|5|6|7|1F|8|@$I|1G|J|1H|K|L]|$I|1I|J|1J|K|L]|$I|1K|J|1L|K|L]]|9|@$I|1M|J|1N|1|1O]]|A|$]]|$1|O|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|R|S|T|A|$U|Z]]]]

You can do this:

<pre><code>$(function() {
 $("#mainTable").width(100).height(200);
});
</code></pre>

This has 2 changes, it now uses <a href="http://api.jquery.com/width/" rel="noreferrer"><code>.width()</code></a> and <a href="http://api.jquery.com/height/" rel="noreferrer"><code>.height()</code></a>, as well as runs the code on the <code>document.ready</code> event. 

Without the <code>$(function() { })</code> wrapper (or <code>$(document).ready(function() { })</code> if you prefer), your element may not be present yet, so <code>$("#mainTable")</code> just wouldn't find anything to...well, do stuff to. <a href="http://jsfiddle.net/kKH7v/" rel="noreferrer">You can see a working example here</a>.

blocks|key|3047338|text|或者使用以下语法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3047339|$("#mainTable").css("width",+"100px");
$("#mainTable").css("height",+"200px");|code-block|syntax|javascript|3047340|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

or use this syntax:

<pre><code>$("#mainTable").css("width", "100px");
$("#mainTable").css("height", "200px");
</code></pre>

blocks|key|307130|text|我尝试了上面所有的建议，但没有一个对我有效，它们改变了clientWidth和clientHeight，而不是实际的宽度和高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|307131|用于$().width和height方法的jQuery文档说：“请注意，.width("+value+")设置框的内容宽度，而不考虑CSS框大小调整属性的值。”|307132|css方法做了同样的事情，所以我不得不使用$().attr()方法。|307133|_canvas.attr('width',+100);
_canvas.attr('height',+200);|code-block|syntax|javascript|307134|我不知道这是不是影响了我，因为我试图调整一个元素的大小，它有多少不同。|307135|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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.

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."

The css approach did the same thing so I had to use the $().attr() methods instead.

<pre><code>_canvas.attr('width', 100);
_canvas.attr('height', 200);
</code></pre>

I don't know is this affect me because I was trying to resize a element and it is some how different or not.

blocks|key|310170|text|我尝试了下面的代码，它运行良好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310171|var+modWidth+=+250;
var+modHeight+=+150;|code-block|syntax|javascript|310172|示例如下：|310173|$(+"#ContainerId+.sDashboard+li"+).width(+modWidth+).height(modHeight);|310174|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I tried below code its worked for fine

<pre><code>var modWidth = 250;
var modHeight = 150;
</code></pre>

example below :-

<pre><code>$( "#ContainerId .sDashboard li" ).width( modWidth ).height(modHeight);
</code></pre>

blocks|key|3261159|text|正如@Misha+Moroshko已经发布了自己的帖子，这是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3261160|$("#mainTable").css("width",+100);
$("#mainTable").css("height",+200);|code-block|syntax|javascript|3261161|与@Nick+Craver接受的答案相比，这种技术有一些优势-你也可以指定不同的单元：|3261162|$("#mainTable").css("width",+"100%25");|3261163|因此，对于某些用户来说，@Nick+Craver的方法实际上可能是错误的选择。在jquery+API+(http://api.jquery.com/width/)中：|offset|length|style|BOLD|3261164|3261165|+.css(width)和.width()之间的区别在于，后者返回的是没有单位的像素值(例如，400)，而前者返回的是单位保持不变的值(例如，400px)。当需要在数学计算中使用元素的宽度时，建议使用.width()方法。|blockquote|3261166|3261167|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/width/^0|0|0|0|0|C|O|1G|S|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|17|8|@$M|18|N|19|O|P]]|9|@$M|1A|N|1B|1|1C]]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1E|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

As @Misha Moroshko has already posted himself, this works:

<pre class="lang-js prettyprint-override"><code>$("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);
</code></pre>

There's some advantage to this technique over @Nick Craver's accepted answer - you can also specifiy different units:

<pre class="lang-js prettyprint-override"><code>$("#mainTable").css("width", "100%");
</code></pre>

So @Nick Craver's method might actually be the wrong choice for some users.
From the jquery API (<a href="http://api.jquery.com/width/" rel="noreferrer">http://api.jquery.com/width/</a>):

<blockquote>
 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.
</blockquote>

blocks|key|3261169|text|$("#mainTable").css("width",+"200px");
$("#mainTable").css("height",+"2000px");|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3261170|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-js prettyprint-override"><code>$(&quot;#mainTable&quot;).css(&quot;width&quot;, &quot;200px&quot;);
$(&quot;#mainTable&quot;).css(&quot;height&quot;, &quot;2000px&quot;);
</code></pre>

I would like to set the width and the height of the <code>div</code> element dynamically using jQuery.

I was trying to replace

<pre><code>&lt;div id="mainTable" style="width:100px; height:200px;"&gt;&lt;/div&gt;
</code></pre>

with this:

<pre><code>$("#mainTable").css("width", "100");
$("#mainTable").css("height", "200");
</code></pre>

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:

<pre><code>$("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);
</code></pre>

How to set width and height dynamically using jQuery

jQuery

我想使用jQuery动态设置div元素的宽度和高度。我在试着替换<div id="mainTable" style="width:100px; height:200px;"></div>有了这个：$("#mainTable").css("width", "100");$("#mainTable").css("heigh...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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