Jak uzyskać szerokość elementu w JavaScript
W fazie testowania strony internetowej lub witryny podczas projektowania, uzyskanie wymiarów zawartych elementów w modelu Object Document (DOM) jest bardzo pomocne w dostosowaniu różnych dodatkowych funkcjonalności i odpowiednio sformatowanie. To podejście powoduje również wyróżnienie witryny, czyniąc ją czytelną i ogólnie dostępny projekt dokumentów.
W tym artykule pokazano metody rozważenia do obliczania szerokości elementu w JavaScript.
Jak uzyskać szerokość elementu w JavaScript?
Szerokość elementu można obliczyć w JavaScript, wykorzystując następujące podejścia:
- "OffsetWidth" nieruchomość.
- "szerokość klienta" nieruchomość.
- "GetBoundingClientRect ()" metoda.
Te podejścia zostaną teraz szczegółowo omówione jeden po drugim!
Metoda 1: Uzyskaj szerokość elementu w JavaScript za pomocą właściwości OffsetWidth
Tę właściwość można zastosować, aby uzyskać dostęp do elementu w stosunku do pobieranego ”ID”I oblicz jego zewnętrzną szerokość.
Przegląd Poniższy przykład demonstracji.
Przykład
Po pierwsze, dołącz „
Następnie zawieraj określony obraz w „div”Element związany z„ID”:
Następnie uzyskaj dostęp do zawartego obrazu i zastosuj „OffsetWidth„Właściwość do obliczenia szerokości obrazu:
var getelement = dokument.getElementById („IMG”).OffsetWidth;
Po obliczeniach uzyskaj dostęp do sekcji nagłówka określonej wcześniej i wyświetl szerokość obrazu za pomocą „Innertext" nieruchomość:
var get = dokument.getElementById („głowa”)
Dostawać.innerText = "Szerokość elementu to:" + getelement;
Dostawać.innerText = "Szerokość elementu to:" + szerokość;
Wyjście
Metoda 2: Uzyskaj szerokość elementu w JavaScript za pomocą klienta
Nieruchomość
Ta właściwość można również wdrożyć podobnie do poprzedniego podejścia. Główną różnicą jest to, że oblicza wewnętrzną szerokość określonego elementu.
Przykład
Najpierw ożywiaj powyższe omawiane metody włączenia nagłówka:
Uzyskaj szerokość elementu HTML za pomocą JavaScript
W tym konkretnym przykładzie dołącz określony nagłówek zawarty w „div”Element określony przez„ID". Ten konkretny nagłówek zostanie obliczony dla „szerokość”:
To jest element nagłówka
Ten konkretny znacznik odnosi się do obliczonej szerokości, która ma być wyświetlana na DOM:
<H4 id = "status">H4><Br>
Teraz utwórz przycisk z załączonym „na kliknięcie„Wydarzenie wywołujące funkcję getWidth ():
Na koniec zdefiniuj funkcję o nazwie „getwidth ()". Tutaj, pobieraj nagłówek do obliczenia dla szerokości. W następnym kroku zastosuj „szerokość klienta„Własność w celu wykonania określonej operacji i podobnie„ „Innertext„Właściwość wyświetli szerokość nagłówka:
funkcja getWidth ()
var getelement = dokument.getElementById („Myelement”);
var get = dokument.getElementById („Status”)
var szerokość = getelement.ClientWidth;
Dostawać.innerText = „Szerokość elementu to„ + szerokość + „px”;
Wyjście
Metoda 3: Uzyskaj szerokość elementu w JavaScript za pomocą metody getBoundingClientRect ()
Ta metoda zwraca rozmiar elementu. Tę metodę można zintegrować z „szerokość„Własność do pomiaru szerokości pola wejściowego.
Spójrz na poniższy przykład.
Przykład
Najpierw zawieraj dane wejściowe „tekst”Pole o określonej wartości zastępczej i załączonym zdarzeniu„onmouseover”:
Teraz zdefiniuj funkcję o nazwie „getwidth ()”I uzyskaj dostęp do określonego pola wejściowego. To pole wejściowe zostanie obliczone dla wielkości i szerokości za pomocą „GetBoundingClientRect ()”Odpowiednio metoda i właściwość szerokości.
Na koniec wyświetl obliczoną szerokość:
funkcja getWidth ()
var getelement = dokument.getElementById („pole”);
var pozycja = getelement.getBoundingClientRect ();
var szerokość = pozycja.szerokość;
alarm (szerokość);
Wyjście
Ten zapis wyjaśnił metody obliczania szerokości elementu w JavaScript.
Wniosek
„„OffsetWidth„Nieruchomość,„szerokość klienta„Nieruchomość lub”GetBoundingClientRect ()„Metoda może zostać wybrana na uzyskanie szerokości elementu w JavaScript. „„OffsetWidth„Własność może być używana do zwrócenia zewnętrznej szerokości elementu,„szerokość klienta„Własność można wykorzystać do obliczenia wewnętrznej szerokości określonego elementu lub”GetBoundingClientRect ()”Można wybrać do obliczania wielkości określonego elementu i wydobywania z niego szerokości. Ten zapis wykazał metody obliczania szerokości elementu w JavaScript.