changing the height of a div with jquery

Question

For some reason, when I try to change the height of a div using jquery, it will not work. The code I've used is this:

<div id="wrapdiv" style="height:2000px">
    ....
</div>

console.log(total);  // yields 1500
changediv = "wrapdiv";
$("#" + changediv).css('height', total);

No matter what I do, it will not change the height to 1500px. The console.log shows that the variable is set correctly. Even when I enter the assignment statement in the console of Chrome, it changes the height. There is an iframe inside of the div if that matters. Any ideas?

Answer 1

You cannot simply put a numeric value only for the height. You must do this:

<div id="wrapdiv" style="height:2000px">
    ....
</div>

console.log(total);  // yields 1500
changediv = "wrapdiv";
$("#" + changediv).css('height', total + 'px');

Or you can do:

<div id="wrapdiv" style="height:2000px">
    ....
</div>

console.log(total);  // yields 1500
changediv = "wrapdiv";
$("#" + changediv).height(total);

JSFiddle link 1

JSFiddle link 2

Answer 2

var total = 1500;
var changediv = "wrapdiv";

$("#" + changediv).height(total);
alert($("#" + changediv).height());

Answer 3

您应该已经寻找过Google ... ^^这是： http : //api.jquery.com/height/

$('#yourDiv').height(100);