Setting a div height in JavaScript

Question

I have three divs with the same class name that I want to alter the height and color of using JavaScript. My code is breaking, not sure why. I've looked at answers to similar problems on here and my code seems to be the same as the solutions.

Any idea on where my code is breaking and how to fix it ?

<HTML>
<head></head>
<body>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <script>
        function altSize() {
            var bar = document.getElementsByClassName("bar");
            bar.style.height = 200px;
            bar.style.background = 'red';
        }
        altSize();
    </script>
</body>
</HTML>

.bar{height: 200px;} why not this?

Mr_Green
– Mr_Green

2013-12-05 16:47:29 +00:00
Commented Dec 5, 2013 at 16:47 — Mr_Green
– Mr_Green, Commented Dec 5, 2013 at 16:47

Benjamin Gruenbaum · Accepted Answer · 2013-12-05 16:50:43Z

5

It's breaking here:

      bar.style.height=200px;

The reason is that 200px is not something you can assign in JS, it reads the 200 and doesn't know what to do with the px, it's not a valid number.

Moreover, getElementsByClassName returns a NodeList and not a single element.

Fix it with

      for(var i=0;i<bar.length;i++){
           bar[i].style.height="200px";
      }

fiddle

edited Dec 5, 2013 at 16:50

answered Dec 5, 2013 at 16:45

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr_Green Over a year ago

I think you mean getElementsByClassName :)

moonshineOutlaw Over a year ago

Do I need to create an array to put the div element classes in?

Benjamin Gruenbaum Over a year ago

@moonshineOutlaw no, you don't. When you perform a getElementsByClassName query it returns a NodeList (Not exactly an array but can be iterated just the same). Below the last code sample in my answer I have a fiddle - you might want to check that out.

Collectives™ on Stack Overflow

Setting a div height in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related