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

Eisbaer

Eisbaer

Erfahrenes Mitglied
Hallo Freunde,

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

PHP: 
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ß
 
Hi,

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

Beispiel:
Code: 
<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
 
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.
 
Zuletzt bearbeitet:
Eisbaer hat gesagt.:
... Die Höhe habe ich nicht per CSS angegeben, da diese sich am Content anpassen soll.
Zum Vergrößern anklicken....
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?
 
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:
Code: 
<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
 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück