Ottieni l'altezza dell'elemento Div in JavaScript

Ottenere l'altezza dell'elemento Div in JavaScript è molto utile per applicare un layout adeguato al Modello Object Model (DOM) del documento che fa risaltare un sito Web e si traduce nell'attirare l'attenzione dell'utente. Ad esempio, creando una particolare pagina Web o sito Web, le funzionalità e le funzionalità aggiunte richiedono l'accumulazione della formattazione adeguata senza alterare la progettazione del documento.

Questo articolo dimostrerà gli approcci per ottenere l'altezza dell'elemento Div in JavaScript.

Come ottenere l'altezza dell'elemento Div in JavaScript?

I seguenti approcci possono essere utilizzati per ottenere l'altezza dell'elemento Div in JavaScript:

• "fuori" Proprietà.
• "ClientHeight" Proprietà.
• "Scrollheight" Proprietà.
• "jQuery" Approccio.

Approccio 1: ottenere l'altezza dell'elemento Div in JavaScript usando la proprietà Offsetheight

IL "fuori"La proprietà restituisce l'altezza esterna di un elemento che include l'imbottitura e i confini. Questa proprietà può essere implementata per calcolare l'altezza dell'intestazione accessibile sul clic del pulsante.

Sintassi

elemento.fuori

Qui, "elemento"Corrisponde all'elemento da calcolare per l'altezza.

Esempio

Nell'esempio seguente:

• Specificare il seguente div con una classe assegnata.
• Inoltre, includi l'intestazione specificata all'interno per essere calcolato per "altezza".
• Ora, crea un pulsante con un "al clic"Evento che invoca la funzione Divheight ().
• Successivamente, allocare le intestazioni per visualizzare l'altezza calcolata:

Questo è il sito web Linuxhint

Ottieni l'altezza dell'elemento Div

L'altezza dell'elemento div è:

Nel codice JS più avanti:

• Nel codice JS indicato di seguito, dichiarare una funzione denominata "Divheight ()".
• Nella sua definizione, accedi al Div assegnato dalla sua classe usando il "documento.QuerySelector ()"Metodo e l'intestazione per l'altezza calcolata usando il"documento.getElementById ()" metodo.
• Dopodiché, applica il "fuori"Proprietà per calcolare l'altezza esterna dell'intestazione specificata e visualizzarla nell'intestazione assegnata discussa prima di usare"testo interno" proprietà:

funzione Divheight ()
Sia GetDiv = documento.QuerySelector ('.elemento');
Sia get = document.getElementById ("testa")
Let Height = GetDiv.in parte;
Ottenere.InnerText = +altezza

Produzione

Nell'output sopra, è evidente che l'altezza viene calcolata.

Approccio 2: ottieni l'altezza dell'elemento Div in JavaScript utilizzando la proprietà clientHeight

IL "ClientHeight"La proprietà, d'altra parte, calcola l'altezza interna dell'elemento compresa l'imbottitura ma esclude i bordi. Questa proprietà può essere applicata allo stesso modo all'immagine inclusa all'interno dell'elemento Div.

Sintassi

elemento.ClientHeight

Qui, allo stesso modo "elemento"Corrisponde all'elemento da calcolare per l'altezza.

Esempio

• Ripeti gli approcci sopra discussi per specificare il "div" classe.
• Qui, specifica la seguente immagine da calcolare per "altezza".
• Allo stesso modo, allocare un'intestazione per l'altezza calcolata e creare un pulsante con un evento allegato "al clic" come discusso:

L'altezza dell'elemento div è:

Ottieni l'altezza dell'elemento Div

Nella funzione JS indicata di seguito:

• Definire una funzione chiamata "Divheight ()".
• Ripeti gli approcci sopra discussi per l'accesso al "div"Elemento e l'intestazione inclusa.
• Dopodiché, applica il "ClientHeight"Proprietà per calcolare l'altezza esterna dell'immagine specificata nel codice sopra e restituirla come un'intestazione:

funzione Divheight ()
let box = document.QuerySelector ('.elemento');
Sia get = document.getElementById ('head')
let Height = Box.ClientHeight;
Ottenere.InnerText = +altezza

Produzione

Dall'output di cui sopra, si può osservare che si ottiene la funzionalità richiesta.

Approccio 3: ottieni l'altezza dell'elemento Div in JavaScript usando la proprietà Scrollheight

IL "ScrollheightLa proprietà "è identica al"ClientHeight"Proprietà mentre restituisce l'altezza di un elemento con l'imbottitura, ma non i confini. Questa proprietà può essere applicata alla tabella creata per calcolare la sua altezza.

Sintassi

elemento.Scrollheight

Nella sintassi data, "elemento"Allo stesso modo corrisponde all'elemento da calcolare per l'altezza.

Esempio

• In primo luogo, includi il "div"Elemento con il specificato"classe"E un allegato"onmouseover"Reindirizzamento dell'evento alla funzione Divheight ().
• Quindi, crea una tabella con l'intestazione specificata e i valori dei dati.
• Allo stesso modo, ravviva il metodo discusso per allocare un'intestazione per visualizzare l'altezza calcolata:

ID.	Nome	Età
1	Harry	18
2	David	46

Nel seguente codice JS, seguire i passaggi dichiarati:

• Definire la funzione denominata "Divheight ()".
• Accedi al "div"Elemento.
• Infine, applica il "Scrollheight"Proprietà per restituire l'altezza della tabella creata:

funzione Divheight ()
Sia GetDiv = documento.QuerySelector ('.elemento');
Let Height = GetDiv.scrollheight;
console.Log ("L'altezza dell'elemento div è:", +altezza)

Produzione

Approccio 4: ottieni l'altezza dell'elemento Div in JavaScript usando l'approccio jQuery

Questo approccio restituisce l'altezza dell'intestazione e il paragrafo all'interno dell'elemento Div con l'aiuto di una biblioteca jQuery.

Esempio

• Nella dimostrazione seguente, includi la libreria jQuery specificata per applicare i suoi metodi.
• Successivamente, specificare il “div"E contenere la seguente intestazione e il paragrafo da calcolare per l'altezza.
• Successivamente, ravviva i metodi discussi per la creazione di un pulsante e l'assegnazione di un'intestazione per la visualizzazione dell'altezza risultante:

JavaScript

JavaScript è un linguaggio di programmazione molto efficace che può essere integrato con HTML e per eseguire varie funzionalità aggiunte nella progettazione di una particolare pagina Web o del sito Web. Ciò si traduce nell'attirare gli utenti e nel migliorare la progettazione complessiva del documento.


Ottieni l'altezza dell'elemento Div

Nel codice seguente:

• Nel codice jQuery, applica il "pronto()"Metodo per eseguire l'ulteriore codice non appena viene caricato il modello di oggetto document (DOM).
• Ora, applica il "clic()"Metodo che eseguirà la funzione specificata sul clic del pulsante
• Infine, al clic del pulsante, accedi al "div"Elemento e applicare il"altezza()"Metodo ad esso restituendo in tal modo la sua altezza:

$ (documento)
.ready (function ()
$ ("pulsante").Click (function ()
var divheight = $ ("#element").altezza();
$ ("#risultato").html ("L'altezza dell'elemento Div è:" + divinità);
);
);

Produzione

Questo articolo ha compilato gli approcci per ottenere l'altezza dell'elemento Div in JavaScript.

Conclusione

IL "da parteproprietà t ", la"ClientHeight"Proprietà, la"Scrollheight"Proprietà o"jQuery"L'approccio può essere utilizzato per ottenere l'altezza dell'elemento Div in JavaScript. La proprietà offsetheight può essere applicata per calcolare l'altezza esterna dell'accesso al pulsante Click. La proprietà ClientHeight e la proprietà Scrollheight possono essere optati per calcolare l'altezza interna dell'elemento. L'approccio jQuery può anche essere implementato includendo la sua libreria e utilizzando i suoi metodi per eseguire i calcoli richiesti. Questo articolo ha dimostrato gli approcci che possono essere applicati per ottenere l'altezza dell'elemento Div in JavaScript.