Frage von SteveausBerlin, 40

Javascript Element-Content-Höhe ermitteln?

ich möchte die automatische Höhe eines Elementes erhalten, dass durch den beinhalteten Content eine Höhe erhält. Ich weiß aber nicht wie ich an diese Höhe komme.

Hintergrund ist, dass ich auf Klick einen Container ausfahren lassen möchte, dieses Wachstum des Containers soll stoppen, wenn der Container seine "normale" Höhe erreicht hat. Im Moment stoppt gar nichts.

mein Codebeispiel:

<style>
#test{background: #ccc; overflow: hidden; }
</style>
<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<button id="button">Button</button>
<script>
    var test = document.getElementById("test");
    var button = document.getElementById("button"); 

    var heightNew = 0;
    test.style.height = heightNew;

    function makeItHigher(){
        if(heightNew > test.style.height){
            clearInterval(interval);
        } else{
            heightNew++;
        }
        return heightNew;
    }
    function takeItAll(){
        interval = setInterval(function(){test.style.height = makeItHigher() + "px";},10);
    }
    
    button.onclick = takeItAll;
</script>
Antwort
von SteveausBerlin, 19

OK, danke, ich bin jetzt selbst drauf gekommen. Ich habe einfach die Elementhöhe ermittelt, bevor ich sie auf 0 setze. So nehme ich einfach die Variable und kann das Intervall beenden, wenn die Höhe des Containers, die Contenthöhe erreicht. 

Keine passende Antwort gefunden?

Fragen Sie die Community