DIV height

M

Maxm123

Mitglied
Ich hab ein Problem mit der Höhe eines DIV's die ich mit JavaScript verändern will. Hab schon im Forum gesucht aber nicht so richtig das gefunden was ich suche.#
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div Größe mit Button</title>
<style type="text/css">
#DIV {
border:1px #000000 solid;
width:200px;
height:50px;
}
#anzeige {
height:100px;
width:100px;
}
</style>
<script language="javascript" type="text/javascript">
counter1 = 0;
function ani() {
  counter1++;
  var h = document.getElementById("DIV").style.height;
  alert(h); //Test mit Alert
  document.getElementById("DIV").style.height = h + 'px';
  h++;
  document.getElementById("anzeige").innerHTML = document.getElementById("DIV").style.height;
    if (counter1 < 100) {
  window.setTimeout("ani()","1")
  }
}
</script>
</head>

<body>
<div id="DIV"></div><div id="anzeige"></div>
<p><input type="button" value="Klick" onclick="ani()" />
</p>
</body>
</html>

Ich will erst die Größe des DIV's ermitteln und die dann um 100Pixel vergrößern. Aber es geht nicht :( ich bekommen nicht mal für h den Wert der Ausgangshöhe zugewiesen

Was ist hier falsch?

Danke
 
Hi,

du musst versuchen über getComputedStyle bzw. currentStyle an die Höhe zu kommen, da zunächst im ersten Durchlauf die Höhe noch nicht bekannt ist, wenn diese über eine ausgelagertes CSS-Definition zugewiesen wird.

Beispiel:
Code: 
counter1 = 0;
function ani() {
  counter1++;
  // Element in Variable
  var objDiv = document.getElementById("DIV");

  // Höhe auslesen
  var h = (window.getComputedStyle)? window.getComputedStyle(objDiv, null).getPropertyValue("height")
                                   : ((objDiv.currentStyle)? objDiv.currentStyle['height'] : null);

  if(h==null)
    return
  else
    h = parseInt(h)+1;  // Neue Höhe berechnen

  alert(h); //Test mit Alert

  // Neue Höhe zuweisen
  objDiv.style.height = h + 'px';

  document.getElementById("anzeige").innerHTML = objDiv.style.height;

  if (counter1 < 100) {
    window.setTimeout("ani()", 50);
  }
}

Eine andere Möglichkeit wäre, die CSS-Definition der Höhe im style-Attribut zu übergeben.

Ciao
Quaese
 
Hey, super das funktioniert gensu so wie ich es wollte. Danke.
Eine andere Möglichkeit wäre, die CSS-Definition der Höhe im style-Attribut zu übergeben.
Zum Vergrößern anklicken....
kannst du das mal genauer erklären bzw mir einen Link geben wo ich alles dazu nachlesen kann.
wäre cool :)

EDIT: soll ich da getAttribute() verwenden? meinst du das?
 
Zuletzt bearbeitet:
Hi,

wie schon angedeutet, steht die Höhe im JS über das style-Objekt (JS) zunächst nicht zur Verfügung, wenn sie über eine ausgelagerte CSS-Definition deklariert wurde. Deshalb der Umweg über oben genannte Methoden.

Soll über das style-Objekt (JS) zugegriffen werden, muss die Höhe bekannt sein. Das erreichst du z.B., indem du die Höhe ins style-Attribut (HTML) des Elements schreibst.
Code: 
<div id="DIV" style="height: 50px;">hallo</div>

Jetzt könnte die zugehörige Animationsfunktion wie folgt aussehen:
Code: 
function ani() {
  counter1++;
  // Element in Variable
  var objDiv = document.getElementById("DIV");
  var h = parseInt(objDiv.style.height)+1;

  // Neue Höhe zuweisen
  objDiv.style.height = h + 'px';

  document.getElementById("anzeige").innerHTML = objDiv.style.height;

  if (counter1 < 100) {
    window.setTimeout("ani()",500)
  }
}

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück