uwe: Höhe eines Elements abfragen und ändern

Beitrag lesen

SELF-Forum

Höhe eines Elements abfragen und ändern

uwe
– Informationen zu den Bewertungsregeln

Hallo,

es kann noch nicht so schwer sein, die Höhe eines Elements um einen bestimmten Wert zu ändern, oder?

Bisher finde ich nur diese eine Möglichkeit, um die Höhe eines Elements zu setzen:

Element.style.height = 100 + 'px';

Um die Höhe eines Elements nun um bspw. 100px zu erhöhen, muss erst die aktuelle Höhe des Elements ermittelt werden, um dann die 100px hinzu addieren zu können.

Element.style.height = AktuelleHöhe + 100 + 'px';

Aber wie kommt man an die aktuelle Höhe? Die erste Idee wäre style.height auszulesen:

AktuelleHöhe = Element.style.height;

Das funktioniert jedoch nicht richtig. Bei Elementen, die per Klasse formatiert sind, liefert diese Abfrage keinen Wert.

AktuelleHöhe = Element.scrollHeight;

Liefert einen Wert. Dieser ist jedoch unbrauchbar, da er zusätzlich zur Höhe auch noch die Größe es inneren Abstands enthält.
Alle anderen von mit versuchten Abfragen liefern ebenfalls nicht die reine Höhe.

Beispiel:

<html>
<head>

<style>

 .style1,
 .style2 { padding: 10px; border: 2px solid black; width: 200px; }

 .style1 { height: 50px; }

</style>

</head>
<body>

  <div class="style1" id="box1"                      >Box 1</div>
  <div class="style2" id="box2" style="height: 60px;">Box 2</div>

  <button id="werte">Werte anzeigen</button>

<script>
  document.querySelector('#werte').addEventListener('click',werte_anzeigen);

  function werte_anzeigen() {
    box1 = document.getElementById("box1");
    box2 = document.getElementById("box2");

    werte = '';
    werte += 'box1 - style.height: ' + box1.style.height + '\n';
    werte += 'box2 - style.height: ' + box2.style.height + '\n';

    werte += 'box1 - offset: ' + box1.offsetHeight + '\n';
    werte += 'box1 - scroll: ' + box1.scrollHeight + '\n';
    werte += 'box1 - client: ' + box1.clientHeight + '\n';
    werte += 'box1 - bound : ' + box1.getBoundingClientRect().height;

    alert(werte);
}
</script>

</body>
</html>

Nur box2.style.height liefert einen Wert, da height direkt im Element angegeben wurde.

box1.style.height bleibt dagegen leer.

Keines der Abfragen für box1 liefert den benötigten Wert 50px. Der ist aber nötig, um diesen dann mit +100 in box1.style.height schreiben zu können, um die box1 um genau 100px in der Höhe vergrößern zu können.

box1.scrollHeight = box1.scrollHeight + 100 oder ähnliches funktioniert leider nicht.

Was übersehe ich, wie kann man die 50px auslesen und dann 100px dazu addieren, wenn ein Element per class formatiert ist und keine direkte style Formatierung enthält?

Vielen Dank.

uwe

Beitrag melden
–
Informationen zu den Bewertungsregeln