0

I have an "inner" div element that I would like to control from the java script. right now the code in loaded() function is not doing anything.

here is the scc and javascript part

    <style>
#outer {    

    width: 30px;
    height: 80px;
    border: 2px solid #ccc;
    overflow: hidden;

    position: relative;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

}

#inner, #inner div {
    width: 100%;
    overflow: hidden;
    left: -2px;
    position: absolute;
}

#inner {
    border: 2px solid #999;
    border-top-width: 0;
    background-color: blue;

    bottom: 0;
    height: 30%;
}

#inner div {
    border: 1px blue;
    border-bottom-width: 0;
    background-color: blue;

    top: 0;
    width: 100%;
    height: 2px;
}

</style> 
<script>


  function loaded(){
         document.getElementById("inner").setAttribute("height","100%");

  }      

</script>

here is the body part

<body onload = "loaded()">
<div id="outer">
              <div id="inner">
                <div></div>
              </div>
            </div>
</body>

now, I am able to change the percentage manually in # inner, right now it's 30%. I guess it could be my luck of understanding of divs.

user3299502
  • 21
  • 1
  • 4

1 Answers1

0

You were close. height isn't an attribute of a div element but style is and height is an attribute of style. Try this instead:

function loaded(){
     document.getElementById("inner").style.setAttribute("height","100%");
}
Will
  • 4,075
  • 1
  • 17
  • 28