# Höhe ermitteln eines DIV's mit display:none



## Eisbaer (8. August 2008)

Hallo Freunde,

leider habe ich noch langer recherche noch immer nicht wirklich etwas gefunden was mich weiter bring,


```
document.getElementById('divwelchesdisplaynoneist').offsetHeight
```

funktioniert zwar, aber leider nicht so wie gewünscht.

offsetHeight gibt bei display:none 0 als Wert zurück.

Besteht eine Möglichkeit die Höhe zu ermitteln? Wenn ja bin ich über konstruktive anregungen sehr dankbar.


Gruß


----------



## Quaese (8. August 2008)

Hi,

wenn du dem Element über CSS eine Höhe zugewiesen hast, könntest du sie mit *getComputedStyle* bzw. *currentStyle* ermitteln.

Beispiel:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
// strCSS: CSS-Eigenschaft in JS-Notation (z.B. backgroundColor statt background-color)
function readStyles(strID, strCSS){
  var strRet;

  //  Falls der Brower die Methode "getComputedStyle" kennt (W3C-DOM)
  if(window.getComputedStyle){
    strRet = window.getComputedStyle(document.getElementById(strID), null)[strCSS];
  }

  //  Falls der Browser die Methode "currentStyle" kennt (neuere IEs)
  else if(document.getElementById(strID).currentStyle){
    strRet = document.getElementById(strID).currentStyle[strCSS];
  }

  return parseInt(strRet);
}
 //-->
</script>
</head>
<body>
<div id="divID" style="height: 200px; width: 300px; display: none;">Unsichtbar</div>
<button onclick="alert(readStyles('divID', 'height'));">divHeight</button>
</body>
</html>
```
Vielleicht hilft dir das weiter.

Ciao
Quaese


----------



## Eisbaer (8. August 2008)

Hi,

danke erstmal für die schnelle Antwort, werde es direkt mal ausprobieren. Die Höhe habe ich nicht per CSS angegeben, da diese sich am Content anpassen soll.

Ich schreibe gleich ob es funktioniert hat 


Danke nochmal

##Edit:

Leider bekomme ich als Rückgabewert "NaN" Not a number...  hättest du eine Idee woran das liegen könnte? Vielleicht weil die höhe 0 ist bei display:none?

###Edit2:

Ok also wenn das DIV mal sichtbar war dann gibt es auch Werte zurück, wenn es sichtbar ist auch die eigentliche Größe. Wenn es nicht sichtbar ist gibt es 0 zurück, womit ich eigentlich wieder am Anfang des Problems bin  danke aber für die mühe die du dir gemacht hast.


----------



## hela (8. August 2008)

Eisbaer hat gesagt.:


> ... Die Höhe habe ich nicht per CSS angegeben, da diese sich am Content anpassen soll.


Dann ist die Höhe dieses Elements mit dem Initialwert "auto" belegt und wird vom Browser beim Seitenaufbau *berechnet*. Wenn andererseits dieses Element überhaupt nicht dargestellt werden soll (display: none), dann hat dieses Element echt keine Höhe und wird auch beim Seitenaufbau nicht berechnet.
Alles klar?


----------



## Eisbaer (8. August 2008)

Ok Danke Hela, naja wieder um eine Erfahrung reicher


----------



## Quaese (8. August 2008)

Hi,

vielleicht funktioniert es mit einem kleinen Workaround.

Für JavaScript-fähige Browser wird der Body in einer Scriptanweisung, die nach dem body-Tag folgt, ausgeblendet (visibility: hidden)
Im *onload*-Event wird das erforderliche Element eingeblendet
Dem Element wird eine neue Eigenschaft (myOffsetHeight) zugefügt, die die Höhe aufnimmt
Das Element wird wieder ausgeblendet
Der Body wird wieder angezeigt

Beispiel:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
window.onload = function(){
  document.getElementById("divID_01").style.display = "block";
  document.getElementById("divID_01").myOffsetHeight = document.getElementById("divID_01").offsetHeight;
  document.getElementById("divID_01").style.display = "none";
  document.getElementsByTagName("body")[0].style.visibility = "visible";
}
 //-->
</script>
</head>
<body>
<script type="text/javascript">
  <!--
  document.getElementsByTagName("body")[0].style.visibility = "hidden";
 //-->
</script>
<div id="divID_01" style="display: none;">Unsichtbar</div>
<button onclick="alert(document.getElementById('divID_01').myOffsetHeight);">divHeight</button>
</body>
</html>
```
Ciao
Quaese


----------



## hela (8. August 2008)

Wow, raffiniert!


----------



## Mordef (10. Februar 2010)

Alternative möglichkeit

statt display: none benutze clip

overflow: hidden
position: absolut
clip: rect(0px,0px,0px,0px)

das dem gewünschtem element geben, anschliessend kann mit offsetHeight die korrekte Höhe abgefragt werden, obwohl das Element nicht sichtbar ist.

Um es sichtbar zu machen, clip auf 'auto' ändern und falls notwendig overflow auf visible und position auf static.

lg
micha


----------

