在javascript中动态增加div的高度

Question

我想在点击按钮时增加div标签的高度。每次用户点击一个按钮时，它应该增加该特定div标签的高度，例如200px左右。

HTML

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

以下脚本正常运行

的Javascript

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

        }
      </script>

但是我想做这样的事情，这是行不通的。我认为问题是值中的'px'部分。任何人都知道如何提取值的INT部分...

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

问题是我如何获得高度值的'250'部分忽略javascript中的'px'..

Answer 1

试试这个：

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

Fiddle

Answer 2

尝试类似

的内容

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

如果offsetHeight无效，请尝试解析style.height的数字值。

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

此外，只需parseInt(container.style.height)即可

Answer 3

您可以使用正则表达式仅将数字保留在字符串中：

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

Answer 4

试试这个：

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

或

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");
}