change one value in style attribute by JS?

Question

I have a div defined with a style like this:

<div id="div1" style="width:600;height:600;border:solid 1px"></div>

How can I change the height of the div by Javascript with a function?

<script type="text/javascript">
function changeHeight(height) {
   var node = dojo.byID("div1");
   // change height?
}
<a href="javascript:changeHeight(300);">Change height to 300</a>

Answer 1

Here is how it might look with jQuery:

<div id="div1" style="width:600;height:600;border:solid 1px"></div>
<a href="#">Change height to 300</a>

<script type="text/javascript">
    $(function() {
        $('a').click(function() {
            $('#div1').css('height', '400px');
            return false;
        });
    });
</script>

Answer 2

<script type="text/javascript">
function changeHeight(height)
{
   document.getElementById("div1").style.height = height + "px";
}
</script>

Answer 3

document.getElementById("div1").style.height = height + "px";

Answer 4

var d = document.getElementById("div1");
d.style.height = "300px";

Answer 5

Just replace your comment with:

node.style.height = height;

Oh, not sure if just passing 300 to your function will make it work, perhaps you'll have to pass "300px" like suggested in the other posts...

Answer 6

Judging by his example code he is using the dojo framework. Changing height in dojo would be done with something similiar to the following:

dojo.style("div1", "height", 300);

http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.style

Answer 7

In dojo, you would do it like this:

dojo.style("div1", "height", "300px");

Having the units on the height is important, as mentioned in the docs.