Höhe eines Elements abfragen und ändern

[Rolf B]

Hallo uwe,

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

Je nach Ausgangsposition ist es einfacher oder schwerer.

Zu den verfügbarern Quellen:

element.clientHeight

Integerwert in Pixeln. Es ist der Innenbereich eines Elements, inklusive Padding, aber ohne einen eventuellen Scrollbar. Eine Eigenschaft für die reine Innenhöhe ohne Padding kenne ich gar nicht.

element.offsetHeight

Integerwert in Pixeln. Es ist clientHeight plus Breite von top- und bottom-border, und der Höhe eines eventuell vorhandenen Scrollbars.

element.scrollHeight

Integerwert in Pixeln. Es ist die Höhe des Element-Inhalts. Der kann höher als das Element sein.

element.style.height

Zeichenkette als 1:1 Abbild der height-Eigenschaft im style-Attribut. Liefert den Wert des height-Attributs, der im style-Attribut des Element gesetzt wurde. Die Einheit kann hier alles mögliche sein - px, em, vh, %. Wenn Du im style-Element mit calc() gearbeitet hast, bekommst Du den calc-Ausdruck, nicht dessen Ergebnis!

cStyle = window.getComputedStyle(element)

Liefert ein style-Objekt mit den aktuellen, vom Browser errechneten Werten. Ein calc-Ausdruck wurde ausgerechnet. Die Einheit von height ist hier px.

Was Du dort an height findest, entspricht dem clientHeight-Wert, wenn box-sizing auf content-box steht (dem Default), und dem offsetHeight-Wert, wenn box-sizing auf border-box steht. Brrrr.

Aber damit kannst Du arbeiten. Denn genau diesen height-Wert musst Du anpassen, um ihn dann am Element-Style zu setzen.

Umständlich daran ist, dass die height-Werte die Einheit enthalten. Die musst Du erstmal abtrennen, den neuen Betrag ausrechnen und dann die Einheit wieder ankleben. Und das Rechnen wird deutlich umständlicher, wenn die Einheit nicht in px gegeben ist. Sondern in %. Oder em. Oder vh. Die Houdini-Erweiterungen von CSS bieten hier einige Hilfsfunktionen an, die Dir den Umgang mit einheitenbehafteten Werten erleichtern, aber wenn Du die verwendest, schließt Du im Moment noch den Firefox aus.

Es könnte einfachere Lösungen für Dein Problem geben. aber dazu müsstest Du verraten, was Du mit deinen Höhenveränderungen eigentlich bezweckst. Vielleicht kann der Browser das, was Du willst, bereits von ganz alleine, wenn man ihn nur lieb danach fragt.

Ich denke da an Grid, Flexbox, calc-Ausdrücke, Custom Propertys - irgendwas könnte vielleicht dein Leben erleichtern.

Rolf