Uzyskaj wysokość elementu DIV w JavaScript

Uzyskanie wysokości elementu DIV w JavaScript jest bardzo pomocne w zastosowaniu odpowiedniego układu do modelu obiektu Document (DOM), który wyróżnia witrynę i powoduje przyciągnięcie uwagi użytkownika. Na przykład tworzenie konkretnej strony internetowej lub strony internetowej Dodane funkcje i funkcje wymagają zgromadzenia odpowiedniego formatowania bez zmiany projektu dokumentów.

Ten zapis pokaże podejścia, aby uzyskać wysokość elementu DIV w JavaScript.

Jak uzyskać wysokość elementu DIV w JavaScript?

Następujące podejścia można wykorzystać, aby uzyskać wysokość elementu DIV w JavaScript:

• "OffSetheight" Nieruchomość.
• "ClientHeight" Nieruchomość.
• "ScrollHeight" Nieruchomość.
• "JQuery" Zbliżać się.

Podejście 1: Uzyskaj wysokość elementu DIV w JavaScript za pomocą właściwości OffSetheight

„„OffSetheight”Własność zwraca zewnętrzną wysokość elementu, w tym wyściółka, a także granice. Ta właściwość można wdrożyć w celu obliczenia wysokości dostępnego nagłówka na przycisku.

Składnia

element.OffSetheight

Tutaj, "element”.

Przykład

W poniższym przykładzie:

• Podaj następującą div z przypisaną klasą.
• Dołącz także określony kierunek do obliczenia dla „wysokość".
• Teraz utwórz przycisk z „na kliknięcie„Wydarzenie wywołujące funkcję divheight ().
• Następnie przeznacz nagłówki, aby wyświetlić obliczoną wysokość:

To jest strona internetowa Linuxhint

Uzyskaj wysokość elementu DIV

Wysokość elementu DIV wynosi:

W dalszym kodzie JS:

• W poniższym kodzie JS zadeklaruj funkcję o nazwie „divheight ()".
• W swojej definicji dostęp do przypisanej div przez klasę za pomocą „dokument.QuerySelelect ()”Metoda i nagłówek obliczonej wysokości za pomocą„dokument.getElementById ()" metoda.
• Następnie zastosuj „OffSetheight„Właściwość do obliczenia zewnętrznej wysokości określonego nagłówka i wyświetlania go w przydzielonym nagłówku omówionym przed użyciem„Innertext" nieruchomość:

funkcja divheight ()
Niech getDiv = dokument.querySelector ('.element');
Niech get = dokument.getElementById („głowa”)
Let Height = GetDiv.OffSetheight;
Dostawać.Innertext = +Wysokość

Wyjście

Na powyższym wyjściu widać, że wysokość jest obliczana.

Podejście 2: Uzyskaj wysokość elementu DIV w JavaScript za pomocą właściwości ClientHeight

„„ClientHeight„Własność z drugiej strony oblicza wewnętrzną wysokość elementu, w tym wyściółka, ale z wyłączeniem granic. Ta właściwość można podobnie zastosować do dołączonego obrazu w elemencie DIV.

Składnia

element.ClientHeight

Tutaj, podobnie „element”.

Przykład

• Powtórz wyżej wymyślone podejścia do określania „div" klasa.
• Tutaj podaj następujący obraz, który ma być obliczony dla „wysokość".
• Podobnie przeznacz nagłówek na obliczoną wysokość i utwórz przycisk z załączonym zdarzeniem „na kliknięcie" jak ustalono:

Wysokość elementu DIV to:

Uzyskaj wysokość elementu DIV

W poniższej funkcji JS:

• Zdefiniuj funkcję o nazwie „divheight ()".
• Powtórz wyżej wymyślone podejścia do uzyskania dostępu do „div”Element i dołączony nagłówek.
• Następnie zastosuj „ClientHeight„Właściwość do obliczenia zewnętrznej wysokości obrazu określonego w powyższym kodzie i zwrócenia go jako nagłówka:

funkcja divheight ()
Let Box = Dokument.querySelector ('.element');
Niech get = dokument.getElementById („głowa”)
Niech wysokość = pudełko.ClientHeight;
Dostawać.Innertext = +Wysokość

Wyjście

Z powyższego wyjścia można zaobserwować, że wymagana funkcjonalność została osiągnięta.

Podejście 3: Uzyskaj wysokość elementu DIV w JavaScript za pomocą właściwości ScrollHeight

„„ScrollHeight„Własność jest identyczna z„ClientHeight„Własność, ponieważ zwraca wysokość elementu z wyściółką, ale nie granic. Tę właściwość można zastosować do utworzonej tabeli, aby obliczyć jej wysokość.

Składnia

element.ScrollHeight

W podanej składni „element”Podobnie odpowiada elementowi obliczonemu dla wysokości.

Przykład

• Po pierwsze, dołącz „div”Element z określonym„klasa”I załączony„onmouseover„Przekierowanie zdarzenia do funkcji divheight ().
• Następnie utwórz tabelę z określonymi wartościami nagłówka i danych.
• Podobnie ożywiaj omawianą metodę przydzielania nagłówka, aby wyświetlić w nim obliczoną wysokość:

ID.	Nazwa	Wiek
1	Złupić	18
2	David	46

W poniższym kodzie JS wykonaj określone kroki:

• Zdefiniuj funkcję nazwaną „divheight ()".
• Uzyskać dostęp do "div" element.
• Na koniec zastosuj „ScrollHeight„Własność, aby zwrócić wysokość utworzonej tabeli:

funkcja divheight ()
Niech getDiv = dokument.querySelector ('.element');
Let Height = GetDiv.ScrollHeight;
konsola.Log („Wysokość elementu DIV to:”, +wysokość)

Wyjście

Podejście 4: Uzyskaj wysokość elementu DIV w JavaScript za pomocą podejścia jQuery

Takie podejście zwraca wysokość nagłówka, a także akapit w elemencie DIV za pomocą biblioteki jQuery.

Przykład

• W poniższej demonstracji dołącz określoną bibliotekę jQuery, aby zastosować jej metody.
• Następnie określ „div”I zawierają następujące nagłówek i akapit do obliczenia dla wysokości.
• Następnie ożywij omawiane metody tworzenia przycisku i przypisania nagłówka dla wyświetlanej w nim wyświetlonej wysokości:

JavaScript

JavaScript to bardzo skuteczny język programowania, który można zintegrować z HTML, a także wykonywać różne dodatkowe funkcje przy projektowaniu konkretnej strony internetowej lub strony internetowej. Powoduje to przyciągnięcie użytkowników i zwiększenie ogólnego projektu dokumentów.


Uzyskaj wysokość elementu DIV

W poniższym kodzie:

• W kodzie jQuery zastosuj „gotowy()„Metoda w celu wykonania dalszego kodu, gdy tylko ładowany jest model obiektu dokumentu (DOM).
• Teraz zastosuj „Kliknij()„Metoda, która wykona określoną funkcję po kliknięciu przycisku
• Na koniec kliknij przycisk, uzyskaj dostęp do „div”Element i zastosuj„wysokość()„Metoda do tego zwracając wysokość:

$ (dokument)
.gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
var divheight = $ („#element”).wysokość();
$ („#wynik”).html („Wysokość elementu div jest:„ + divheight);
);
);

Wyjście

Ten zapis skompilował podejścia, aby uzyskać wysokość elementu DIV w JavaScript.

Wniosek

„„OffsetheighT ”nieruchomość,„ClientHeight„Nieruchomość,„ScrollHeight„Własność lub„ ”JQuery„Można zastosować podejście do uzyskania wysokości elementu DIV w JavaScript. Właściwość OffSetheight można zastosować do obliczenia zewnętrznej wysokości dostępnego nagłówka na przycisk Kliknij. Właściwość ClientHeight i właściwość ScrollHeight mogą zostać wybrane do obliczenia wewnętrznej wysokości elementu. Podejście JQuery można również wdrożyć, włączając jego bibliotekę i wykorzystując metody wykonywania wymaganych obliczeń. W tym artykule pokazano podejścia, które można zastosować, aby uzyskać wysokość elementu DIV w JavaScript.