dynamically increasing height of div in javascript

Question

I want to increase the height of the div tag on click of button. Every time a user clicks a button it should increase the height of that particular div tag, say by 200px or so..

HTML

      <div id="controls">
         <input type="button" onclick="incHeight()" id="btn" name="btn">
      </div>
      <div id="container" style="min-height:250px;"> &nbsp;</div>

The below script works properly

Javascript

      <script type="text/javascript">
        function incHeight()
        {
          document.getElementById("container").style.height = 250+'px';

        }
      </script>

But I want to do something like this, which is not working. The problem I think is the 'px' portion in the value. Anybody have any idea how to extract the INT portion of the value...

      <script type="text/javascript">
        function incHeight()
        {
          document.getElementById("container").style.height += 250;     
        }
      </script>

The problem is how do I get the '250' portion of the height value neglecting the 'px' in javascript..

Sergio · Accepted Answer · 2013-12-07 09:51:18Z

21

Try this:

function incHeight() {
    var el = document.getElementById("container");
    var height = el.offsetHeight;
    var newHeight = height + 200;
    el.style.height = newHeight + 'px';
}

Fiddle

answered Dec 7, 2013 at 9:51

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

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

Comments

Powerslave · Accepted Answer · 2013-12-07 09:52:16Z

3

Try something like

var container = document.getElementById('container');
container.style.height = (container.offsetHeight + 250) + "px";

In case offsetHeight is not working, try parsing the style.height for its numeric value instead.

var currentHeight = (container.style.height) ? (parseInt(container.style.height.match(/[0-9]+/)[0]) : container.offsetHeight;

Also, simply parseInt(container.style.height) might work

answered Dec 7, 2013 at 9:52

Powerslave

1,41815 silver badges16 bronze badges

Comments

Mr.G · Accepted Answer · 2013-12-07 10:42:58Z

2

Try this:

getElementById('container').setAttribute("style","height:500px");

or

function resize(element) {
  var height = 0;
  var body = window.document.body;
  if (window.innerHeight) {
      height = window.innerHeight;
  } else if (body.parentElement.clientHeight) {
      height = body.parentElement.clientHeight;
  } else if (body && body.clientHeight) {
      height = body.clientHeight;
  }
  element.style.height = ((height - element.offsetTop) + "px");
}

edited Dec 7, 2013 at 10:42

answered Dec 7, 2013 at 10:29

Mr.G

3,6092 gold badges19 silver badges21 bronze badges

Comments

GolezTrol · Accepted Answer · 2013-12-07 09:52:35Z

0

You can use a regular expression to only keep the numbers in the string:

var style = document.getElementById("container").style;
style.height = style.height.replace( /^\D+/g, '') + 'px';

answered Dec 7, 2013 at 9:52

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

Collectives™ on Stack Overflow

dynamically increasing height of div in javascript

HTML

Javascript

4 Answers 4

Fiddle

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related