Ich möchte die Höhe des div-Tags beim Klicken auf die Schaltfläche erhöhen. Jedes Mal, wenn ein Benutzer auf eine Schaltfläche klickt, sollte sich die Höhe dieses bestimmten div-Tags erhöhen, beispielsweise um etwa 200 Pixel.

HTML

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

Das folgende Skript funktioniert ordnungsgemäß

Javascript

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

        }
      </script>

Aber ich möchte so etwas machen, was nicht funktioniert. Das Problem, denke ich, ist der 'px'-Anteil im Wert. Jeder hat eine Idee, wie man den INT-Teil des Wertes extrahiert ...

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

Das Problem ist, wie ich den '250'-Teil des Höhenwerts bekomme, der den' px 'in Javascript vernachlässigt.

5
Parminder 7 Dez. 2013 im 13:46

4 Antworten

Beste Antwort

Versuche dies:

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

Geige

14
Sergio 7 Dez. 2013 im 09:51

Versuchen Sie Folgendes:

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

oder

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");
}
0
Mr.G 7 Dez. 2013 im 10:42

Versuchen Sie etwas wie

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

Falls offsetHeight nicht funktioniert, analysieren Sie stattdessen style.height auf seinen numerischen Wert.

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

Außerdem könnte einfach parseInt(container.style.height) funktionieren

2
Powerslave 7 Dez. 2013 im 09:52

Sie können einen regulären Ausdruck verwenden, um nur die Zahlen in der Zeichenfolge beizubehalten:

var style = document.getElementById("container").style;
style.height = style.height.replace( /^\D+/g, '') + 'px';
0
GolezTrol 7 Dez. 2013 im 09:52