CODEWITHSUNDEEP
javascriptdojo
David.Chu.ca
David.Chu.ca

Reputation: 38654

How can I change one value in style attribute with JavaScript?

I have a div defined with a style attribute:

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

How can I change the height of the div with JavaScript?

Upvotes: 13

Views: 23459

Answers (7)

Ben Lowery
Ben Lowery

Reputation: 344

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.

Upvotes: -1

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38378

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>

Upvotes: 2

Rick Hochstetler
Rick Hochstetler

Reputation: 3123

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

Upvotes: 7

Sam
Sam

Reputation: 348

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

Upvotes: 1

Seb
Seb

Reputation: 25147

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

Upvotes: 2

ChristopheD
ChristopheD

Reputation: 116167

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

Upvotes: 5

Sebastian Celis
Sebastian Celis

Reputation: 12195

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

Upvotes: 26

Related Questions