Javascript Höhe Des Elements Abrufen

| | | | | | | | | | | | | | | | | | | |

Beim Entwerfen einer Webseite möchten Sie wahrscheinlich bestimmte Abmessungen für die Elemente angeben, die auf der Webseite erscheinen. Beispielsweise möchten Sie vielleicht, dass ein Feld eine bestimmte Höhe hat oder eine Textzeile sich auf eine bestimmte Breite erstreckt.

Hier kommen die CSS-Eigenschaften height und width ins Spiel. Die Höhen- und Breiteneigenschaften werden verwendet, um die Höhe und Breite eines Elements in CSS zu definieren.

Dieses Tutorial behandelt anhand von Beispielen die Grundlagen der CSS-Höhen- und -Breiteneigenschaften und die Verwendung der minimalen und maximalen Höhe und width-Eigenschaften zum Entwerfen von responsiven Elementen. Am Ende dieses Tutorials sind Sie mit der Verwendung von CSS-Eigenschaften für Höhe und Breite vertraut, um die Größe eines Elements auf einer Webseite festzulegen.

CSS-Höhe und -Breite

Anpassen Mit der Höhe und Breite eines Elements auf einer Webseite können Sie den Platz definieren, den das Element auf der Webseite einnehmen wird. Dies kann Ihnen dabei helfen, eine Struktur für die Elemente Ihrer Webseite zu entwickeln, damit jedes Element entsprechend Ihren Anforderungen richtig angezeigt wird.

Um zu definieren, wie weit sich ein Element horizontal und vertikal erstrecken kann, können Sie die Breite und verwenden Höheneigenschaften.

Mit den Breiten- und Höheneigenschaften können Sie eine bestimmte Breite und Höhe für den Inhaltsbereich einer Box festlegen. Das bedeutet, dass die Breiten- und Höheneigenschaften den Platz steuern, den eine Box enthält, und sich nicht auf einen Rand oder eine Reihe von Auffüllungen für eine Box auswirken.

Die Höhen- und Breiteneigenschaften verwenden die folgende Syntax:.

HeightValue und widthValue können jeden der folgenden Werte annehmen:

  • auto: Der Browser berechnet Höhe und Breite automatisch
  • Länge:. die Breite oder Höhe eines Rahmens in px, em, rem usw.
  • Prozent: die Breite oder Höhe eines Kästchens in Prozent der Größe der Blöcke, in denen ein Anfangsbuchstaben
  • element erscheint:. der Standardwert, der für das Feld
  • inherit: angegeben ist. derselbe Wert wie die Breite oder Höhe der Box, in der ein Element erscheint

Da wir nun die Grundlagen der Höhen- und Breiteneigenschaften kennen, können wir ein Beispiel für jede dieser Eigenschaften untersuchen Eigenschaften in Aktion.

CSS-Höhe und -Breite

Angenommen, wir entwerfen eine Website für ein lokales Café namens „The Pickled Apple“. Website, die eine kurze Beschreibung des Cafés enthalten sollte.

Dieser Bereich sollte 200 Pixel breit und 200 Pixel hoch sein und einen hellgrauen Hintergrund haben. Diese Abmessungen wurden gewählt, um sicherzustellen, dass die anderen Elemente, die wir hinzufügen möchten, gewährleistet sind an die Form der Webseite an, wenn wir sie implementieren.

Wir könnten den folgenden Code verwenden, um die Box zu erstellen:.

Klick Bild der Schaltfläche

Lassen Sie uns unseren Code analysieren. In unserer HTML-Datei haben wir einen Textabsatz mit einem < erstellt p>tag. Dieses

Tag hat den Klassennamen AboutBox, den wir in unserer CSS-Datei verwenden, um den Textabsatz zu formatieren.

In unserer CSS-Datei haben wir eine Stilregel definiert, die das gilt für jedes Element mit dem Klassennamen AboutBox. Diese Stilregel setzt die Höhe eines Elements auf 200 Pixel, die Breite eines Elements auf 200 Pixel und die Hintergrundfarbe eines Elements auf Hellgrau.

Wenn wir möchten, dass unser Element 100 Pixel breit ist. Wir müssen die Eigenschaft width auf 100px ändern. Oder wenn wir wollten, dass unser Element 300 Pixel hoch ist, können wir die Eigenschaft „Höhe“ auf 300 Pixel ändern.

Eigenschaften von CSS minimale und maximale Länge

Breite und Höhe sind feste Werte. Das bedeutet, dass die angegebene Breite und Höhe gleich bleiben und sich nicht ändern, wenn Sie die Größe des Fensters ändern oder die Webseite auf einem anderen Gerät anzeigen (es sei denn, Sie verwenden einen relativen Höhenwert, z. B. einen Prozentsatz der Größe des übergeordneten Elements).

Es ist wichtig, dies zu verstehen, denn wenn Sie ein barrierefreies Erlebnis entwerfen möchten, ist es möglicherweise nicht praktikabel, bestimmte Höhen und Breiten für die Elemente festzulegen. Wenn Sie beispielsweise die Bildbreite auf 500 Pixel festlegen, wird das Bild möglicherweise nicht richtig gerendert, wenn ein Benutzer die Website auf einem Mobilgerät anzeigt, und die Größe des Bildschirms kann kleiner sein.

Hier ist das Minimum und maximale Längenwerte .

Um ein Element an Bildschirme und Fensterabmessungen anzupassen , können Sie die Eigenschaften minimum width, max width, min-height und max-height verwenden. Wenn Sie diese Eigenschaften angeben, werden die für Breite und Höhe angegebenen Werte außer Kraft gesetzt.

Die Eigenschaft min-height definiert die minimale Höhe einer Eigenschaft. Wenn die Mindesthöhe angegeben ist, kann die Höhe eines Elements nie kleiner als der Wert für die Mindesthöhe sein. Die Eigenschaft min-width definiert die minimale Breite einer Eigenschaft und funktioniert auf die gleiche Weise.

Ebenso können Sie, wenn Sie die maximale Höhe oder Breite einer Eigenschaft festlegen möchten, max height und maximum width verwenden, bzw..

Kehren wir zu unserem Kaffeebeispiel von vorhin zurück. Angenommen, wir möchten die Breite unseres Felds basierend auf der Bildschirmgröße des Benutzers ändern. Die maximale Boxbreite sollte 500px betragen und unsere Box sollte nie schmaler als 100px sein. Wir könnten dies mit dem folgenden Code tun:

Klick Bild der Schaltfläche

Lassen Sie uns unseren Code und Chat analysieren. Wie es funktioniert. In unserer HTML-Datei haben wir einen Textabsatz zwischen

-Tags angegeben, der denselben Text wie in unserem ersten Beispiel enthält. Der Name der Klasse, die diesem Textabsatz zugeordnet ist, lautet AboutBox.

In unserer CSS-Datei haben wir drei Eigenschaften angegeben, die der Klasse AboutBox zugeordnet sind. p>

Die Breite der Eigenschaft max- ist auf 500 Pixel eingestellt, was bedeutet, dass die maximale Boxbreite 500 Pixel beträgt. Die Eigenschaft "min width" ist auf 100 Pixel eingestellt, was bedeutet, dass die Box nie schmaler als 100 Pixel angezeigt wird, unabhängig davon, auf welchem Gerät ein Benutzer die Website anzeigt Die Eigenschaft background-color ist auf LightGray gesetzt, was die Hintergrundfarbe unserer Box auf hellgrau setzt.

Die Größe dieses Bereichs ändert sich je nach Größe des Browsers, also wenn Sie Ihr Browserfenster kleiner machen , ändert sich die Größe des Felds entsprechend. Egal wie groß Ihr Browserfenster erscheint, die Breite des

Tags wird jedoch niemals 500 Pixel überschreiten.

Fazit

Die CSS-Eigenschaft für Höhe und Breite ie ermöglichen es Ihnen, die Höhe und Breite eines Elements auf einer Webseite zu definieren.

Diese Eigenschaften legen jedoch einen festen Wert für die Höhe und Breite eines Elements fest. Wenn Sie möchten, dass sich die Größe eines Felds basierend auf der Größe des Browserfensters ändert, können Sie die Eigenschaften min height, min-width, max-height und max-width verwenden.

Dieses Tutorial wurde besprochen , Bezug nehmend auf Beispiele, die Grundlagen von Höhe und Breite in CSS, wie man Höhen- und Breiteneigenschaften verwendet und wie man maximale Höhe und Breite und minimale Übereinstimmungseigenschaften verwendet, um die Größe eines Elements einer Webseite zu definieren. Sie sind jetzt bereit um die Höhen- und Breiteneigenschaften wie ein Experte zu verwenden!