Jak uzyskać wymiary obrazu w JavaScript

Często spotykamy się z sytuacjami, w których chcemy dostosować rozmiar obrazów dla właściwej struktury i regulacji całego modelu obiektu dokumentu (DOM) podczas testowania strony internetowej lub strony internetowej. Na przykład w przypadku dostosowania przestrzeni do zarezerwowania dla określonego obrazu, jest załadowany. W takich przypadkach możesz użyć różnych metod JavaScript do uzyskania wymiarów obrazu w JavaScript.

W tym artykule omówiono metody uzyskania wymiarów obrazu w JavaScript.

Jak uzyskać wymiary obrazu w JavaScript?

Aby uzyskać wymiary obrazu w JavaScript, można zastosować następujące podejścia:

• "szerokość" I "wysokość" nieruchomości
• "dokument.QuerySelelect ()”Metoda i„na kliknięcie" wydarzenie
• "addEventListener ()" metoda

Przejrzyj omawiane metody jeden po drugim!

Metoda 1: Uzyskaj wymiary obrazu w JavaScript za pomocą właściwości szerokości i wysokości

„„wysokość" I "szerokość”Właściwości ustawiają wysokość i szerokość określonego elementu. Właściwości te można wykorzystać wraz z słowem kluczowym odnoszącym się do bieżącego obiektu, aby uzyskać wymiary obrazu.

Składnia

obiekt.styl.szerokość

W podanej składni szerokość określonego obiektu zostanie pobrana.

obiekt.styl.wysokość

Tutaj zostanie pobrana wysokość dodanego obiektu.

Przykład

Najpierw utwórz instancję instancji HTMlimageElement za pomocą konstruktora image () i uzyskaj dostęp do obrazu do wymiarów, określając jego ścieżkę:

var dimensions = new Image ();
wymiary.szablon src = '.jpg ';

Następnie zastosuj zdarzenie Onload, tak że gdy okno ładuje się, „szerokość”I„ „wysokość”Właściwości wraz z obiektem uzyskują dostęp do wysokości i szerokości określonego obrazu i wyświetl go za pomocą alertu:

wymiary.onload = function ()
alarm (to.szerokość + 'x' + to.wysokość);

Odpowiednie wyjście będzie następujące:

Metoda 2: Uzyskaj wymiary obrazu w JavaScript za pomocą dokumentu.Metoda QuerySelelect () i zdarzenie OnClick

„„dokument.QuerySelelect ()„Metoda pobiera pierwszy element pasujący do selektora CSS i„na kliknięcie”Zdarzenie ma miejsce, gdy użytkownik kliknie element. Metody te można użyć w połączeniu, aby uzyskać dostęp do ścieżki obrazu i pobrać jego wymiar na przycisku.

Składnia

dokument.querySelelector (selektory CSS)

Tutaj, "Selektory CSS”Reprezentuje jeden lub więcej niż jeden selektorów CSS.

obiekt.onClick = imgSize () MysScript;

W powyższej składni „imgSize ()”Odnosi się do funkcji, która zostanie wywołana, gdy„na kliknięcie„Wydarzenie się uruchamia.

Przykład

W poniższym przykładzie utworzymy przycisk i dołączymy do niego zdarzenie OnClick, które wywoła funkcję IMGSIZE () po uruchomieniu:

Uzyskaj wymiary obrazu

Teraz określ ścieżkę obrazu w „”Tag:

Następnie zdefiniuj funkcję o nazwie „imgSize ()". W swojej definicji uzyskaj dostęp do obrazu i pobieraj jego szerokość i wysokość za pomocą właściwości szerokości i wysokości odpowiednio, jak omówiono w poprzedniej metodzie, i wyświetl go w polu alertu:

funkcja imgSize ()
var Dimensions = Dokument.querySelelect („#dim”);
var szerokość = wymiary.szerokość;
var wysokość = wymiary.wysokość;
alert („oryginalna szerokość =” + szerokość + ”,„ + „oryginał high =” + wysokość);

Wyjście

Metoda 3: Uzyskaj wymiary obrazu w JavaScript za pomocą metody addEventListener ()

„„addEventListener ()„Metoda dołącza do dokumentu obsługi zdarzeń. Tę metodę można zaimplementować, aby uzyskać dostęp do przycisku utworzonego i obrazu oraz zastosować zdarzenie kliknięcia, aby uzyskać wymiary obrazu przy przycisku.

Składnia

dokument.addEventListener (kliknij, funkcja)

W powyższej składni „Kliknij”Odnosi się do określonego wydarzenia i„funkcjonować”Jest odpowiednio funkcją, która zostanie odwołana.

Przykład

Najpierw utwórz przycisk i określ ścieżkę obrazu o określonych wartościach wysokości i szerokości:

Uzyskaj wymiary obrazu
= "rozmiar">

---

style = "high: 300px; szerokość: 300px;"

Teraz uzyskaj dostęp do utworzonego przycisku i konkretnego obrazu za pomocą „dokument.QuerySelelect ()" metoda.

Następnie dodaj wydarzenie „Kliknij„Do przycisku i zastosuj właściwości przyrody i naturalne, aby wylogować oryginalną szerokość i wysokość obrazu:

Niech btn = dokument.querySelelect („przycisk”);
Let Dimensions = Dokument.QuerySelelect („#rozmiar”);
Niech IMG = dokument.QuerySelelect („IMG”);
Btn.addEventListener („kliknij”, () =>
wymiary.innerText = 'height: $ IMG.NaturalHeight szerokość: $ img.NaturalWidth ';
);

Wyjście

Wyjaśniliśmy najprostsze metody uzyskania wymiarów obrazu w JavaScript.

Wniosek

Aby uzyskać wymiary obrazu w JavaScript, użyj „szerokość" I "wysokość„Właściwości w celu utworzenia obiektu i dostępu odpowiednio do szerokości i wysokości określonego obrazu„dokument.QuerySelelect ()”Metoda i„na kliknięcie„Wydarzenie, aby uzyskać dostęp do ścieżki obrazu i uzyskać wymiar przycisku Kliknij lub„addEventListener ()„Metoda dostępu do utworzonego przycisku i obrazu i zastosowania zdarzenia kliknięcia, aby uzyskać odpowiednie wymiary obrazu. Ten blog wyjaśnił metody uzyskania wymiarów obrazu w JavaScript.