Javascript Ottiene L’Altezza Dell’Elemento

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

Quando stai progettando una pagina web, probabilmente vorrai specificare dimensioni specifiche per gli elementi che appaiono sulla pagina web. Ad esempio, potresti volere che una casella abbia una certa altezza o che una riga di testo si estenda su una certa larghezza.

è qui che entrano in gioco le proprietà CSS di altezza e larghezza. L’altezza e le proprietà di larghezza consentono di impostare l’altezza e la larghezza di un elemento in CSS.

Questo tutorial discuterà, con esempi, le basi delle proprietà CSS di altezza e larghezza e come utilizzare il min e le proprietà di altezza e larghezza massime per progettare elementi reattivi. Alla fine della lettura di questo tutorial, sarai un esperto nell’uso delle proprietà CSS altezza e larghezza per impostare la dimensione di un elemento in una pagina web.

Altezza e larghezza CSS

Impostare l’altezza e la larghezza di un elemento su una pagina web ti permette di definire lo spazio che quell’elemento occuperà sulla pagina web. Questo può aiutarti a sviluppare una struttura per gli elementi della tua pagina web in modo che ogni elemento appaia correttamente in base alle tue esigenze.

Per definire quanto un elemento può estendersi orizzontalmente e verticalmente, puoi utilizzare le proprietà di larghezza e altezza, rispettivamente.

Le proprietà di larghezza e altezza consentono di impostare una larghezza e un’altezza specifiche per l’area del contenuto di una casella. Ciò significa che le proprietà di larghezza e altezza controllano lo spazio che il contenuto di una casella ha e non influiscono su alcun margine o padding impostato per una casella.

Le proprietà di altezza e larghezza utilizzano la seguente sintassi:

I valori heightValue e widthValue possono accettare uno qualsiasi dei seguenti valori:

  • auto: Il browser calcola automaticamente l’altezza e la larghezza.
  • lunghezza: la larghezza o l’altezza di un riquadro in px, em, rem, ecc.
  • percentuale: la larghezza o l’altezza di un riquadro come percentuale della dimensione del blocco in cui appare un elemento.
  • initial: il valore predefinito specificato per la casella.
  • inherit: lo stesso valore della larghezza o dell’altezza per la casella in cui appare un elemento.

Ora che conosciamo le basi delle proprietà di altezza e larghezza, possiamo esplorare un esempio di ciascuna di queste proprietà in azione.

Proprietà CSS di altezza e larghezza

Supponiamo che stiamo progettando un sito Web per un bar locale chiamato The Pickled Apple. Questo caffè ci ha chiesto di creare una casella nella pagina "Informazioni" del loro sito Web, che dovrebbe contenere una breve descrizione del cafe.

Questa casella dovrebbe essere larga 200 px e alta 200 px e avere uno sfondo grigio chiaro. Queste dimensioni sono state scelte per garantire che gli altri elementi che vogliamo aggiungere alla pagina web si adattino quando li implementiamo.

Potremmo usare il seguente codice per creare la scatola:

Fai clic su’Immagine pulsante nell’editor di codice sopra per vedere l’output del nostro codice HTML/CSS.

Analizziamo il nostro codice. Nel nostro file HTML, abbiamo creato un paragrafo di testo utilizzando un

etichetta. Questo

tag ha il nome della classe aboutBox, che usiamo nel nostro file CSS per definire lo stile del paragrafo di testo.

Nel nostro file CSS, abbiamo definito una regola di stile che si applica a qualsiasi elemento con il nome della classe aboutBox. Questa regola di stile imposta l’altezza di un elemento su 200px, la larghezza di un elemento su 200px e imposta il colore di sfondo di un elemento su grigio chiaro.

Se vogliamo che il nostro elemento sia largo 100px, dobbiamo potrebbe modificare la proprietà della larghezza in modo che sia uguale a 100 px. Oppure, se volessimo che il nostro elemento fosse alto 300 px, potremmo modificare la proprietà height in modo che sia uguale a 300 px.

Proprietà di lunghezza minima e massima CSS

Larghezza e altezza sono valori fissi. Ciò significa che la larghezza e l’altezza specificate rimarranno le stesse e non cambieranno se ridimensioni la finestra o visualizzi il pagina web su un dispositivo diverso (a meno che non utilizzi un valore relativo di altezza, come una percentuale della dimensione dell’elemento padre).

è importante capirlo perché se vuoi progettare un un’esperienza accessibile, potrebbe non essere pratico impostare altezze e larghezze specifiche per gli elementi. Ad esempio, se specifichi la larghezza di un’immagine su 500 px, il rendering dell’immagine potrebbe non essere corretto se un utente visualizza il sito su un dispositivo mobile , la cui dimensione dello schermo potrebbe essere più piccola.

è qui che entrano in gioco i valori di lunghezza minima e massima.

Per adattare un elemento a schermi e dimensioni della finestra, è possibile utilizzare la larghezza minima, m proprietà ax-width, min-height e max-height. Quando specifichi queste proprietà, i valori specificati per la larghezza e l’altezza verranno sovrascritti.

La proprietà min-height definisce l’altezza minima di una proprietà. Se viene specificata l’altezza minima, l’altezza di un elemento non può mai essere inferiore al valore dell’altezza minima. La proprietà min-width definisce la larghezza minima di una proprietà e funziona allo stesso modo.

Analogamente, se vuoi definire l’altezza o la larghezza massima di una proprietà, puoi usare max- altezza e larghezza massima, rispettivamente.

Torniamo al nostro esempio di caffè di prima. Supponiamo di voler cambiare la larghezza della nostra casella a seconda delle dimensioni dello schermo dell’utente. La larghezza massima della casella dovrebbe essere 500 px e la nostra casella non dovrebbe mai essere più stretta di 100 px. Potremmo raggiungere questo obiettivo utilizzando il seguente codice:

Fai clic su’Immagine pulsante nell’editor di codice sopra per vedere l’output del nostro codice HTML/CSS.

Analizziamo il nostro codice e discutiamo come funziona. Nel nostro file HTML, abbiamo specificato un paragrafo di testo tra

tag che contengono lo stesso testo del nostro primo esempio. Il nome della classe associato a questo paragrafo di testo è aboutBox.

Nel nostro file CSS, abbiamo specificato tre proprietà associate a aboutBox class.

La proprietà max-width è impostata su 500 px, il che significa che la larghezza massima della casella è 500 px. La proprietà min-width è impostata su 100 px, il che significa che la casella non apparirà mai più stretta di 100 px, indipendentemente dal dispositivo su cui un utente sta visualizzando il sito. La proprietà background-color è impostata su lightgray, che imposta il colore di sfondo della nostra casella su grigio chiaro.

Le dimensioni di questo box cambierà in base alle dimensioni del browser. Quindi, se rimpicciolisci la finestra del browser, la dimensione della casella cambierà di conseguenza. Tuttavia, non importa quanto grande appaia la finestra del browser, la larghezza del tag

non supererà mai i 500 px.

Conclusione

Le proprietà CSS altezza e larghezza consentono di definire l’altezza e la larghezza di un elemento in una pagina web.

Tuttavia, queste proprietà impostano un valore fisso per l’altezza e la larghezza di an elemento. Se desideri che le dimensioni di una casella cambi in base alle dimensioni della finestra del browser, puoi utilizzare le proprietà min-height, min-width, max-height e max-width.

Questo tutorial ha discusso, con riferimento agli esempi, le basi di altezza e larghezza in CSS, come utilizzare le proprietà di altezza e larghezza e come utilizzare le corrispondenti proprietà di altezza e larghezza massima e minima per impostare la dimensione di un elemento su una pagina web. Ora sei pronto per iniziare a utilizzare le proprietà di altezza e larghezza come un esperto!