Hvordan få bildedimensjoner i JavaScript

Vi møter ofte situasjoner der vi ønsker å justere størrelsen på bildene for riktig struktur og justering av den overordnede dokumentobjektsmodellen (DOM) mens vi tester en webside eller et nettsted. For eksempel når det gjelder å justere plassen som skal reserveres for et bestemt bilde, blir det lastet. I slike tilfeller kan du bruke de forskjellige JavaScript -metodene for å få bildedimensjoner i JavaScript.

Denne artikkelen vil diskutere metodene for å få bildedimensjoner i JavaScript.

Hvordan få bildedimensjoner i JavaScript?

For å få bildedimensjoner i JavaScript, kan følgende tilnærminger brukes:

• “bredde”Og“høyde" egenskaper
• “dokument.QuerySelector ()”Metode og“ved trykk" begivenhet
• “AddEventListener ()”Metode

Gå gjennom de diskuterte metodene en etter en!

Metode 1: Få bildedimensjoner i JavaScript ved bruk av bredde- og høydeegenskaper

“høyde”Og“bredde”Egenskaper setter høyden og bredden på det spesifiserte elementet. Disse egenskapene kan brukes sammen med et nøkkelord som refererer til det nåværende objektet for å få bildets dimensjoner.

Syntaks

gjenstand.stil.bredde

I den gitte syntaks vil bredden på det spesifiserte objektet bli hentet.

gjenstand.stil.høyde

Her vil høyden på det ekstra objektet bli hentet.

Eksempel

Først må du lage en forekomst HTMLimageElement -forekomst ved å bruke Image () -konstruktøren og få tilgang til bildet som skal nås for dimensjoner ved å spesifisere banen:

var dimensjoner = nytt bilde ();
dimensjoner.src = 'mal.jpg ';

Deretter bruker du en pålastningshendelse slik at når vinduet lastes inn, "bredde" og "høyde”Egenskaper sammen med objektet får tilgang til høyden og bredden på det spesifikke bildet og viser det via varsel:

dimensjoner.onload = funksjon ()
Varsel (dette.bredde + 'x' + dette.høyde);

Den tilsvarende utgangen vil være som følger:

Metode 2: Få bildedimensjoner i JavaScript ved å bruke dokument.QuerySelector () Metode og OnClick -arrangement

“dokument.QuerySelector ()”Metoden får det første elementet som samsvarer med en CSS -velger og“ved trykk”Hendelsen oppstår når brukeren klikker på et element. Disse metodene kan brukes i kombinasjon for å få tilgang til bildeveien og hente dimensjonen på knappeklikk.

Syntaks

dokument.QuerySelector (CSS Selectors)

Her, “CSS -velgere”Representerer en eller flere enn en CSS -velgere.

gjenstand.onClick = imgSize () myScript;

I syntaks ovenfor, "IMGSIZE ()”Refererer til funksjonen som vil bli påberopt når en“ved trykk”Arrangementet blir utløst.

Eksempel

I det følgende eksemplet vil vi opprette en knapp og legge ved en OnClick -hendelse til den som vil påkalle imgSize () -funksjonen når den utløses:

Få bildedimensjoner

Nå, spesifiser banen til bildet i “" stikkord:

Etter det, definer en funksjon som heter “IMGSIZE ()”. I sin definisjon får du tilgang til bildet og hente bredden og høyden ved hjelp av henholdsvis bredde- og høydeegenskapene, som diskutert i forrige metode, og vise det i varslingsboksen:

funksjon imgSize ()
var dimensjoner = dokument.querySelector ("#dim");
var bredde = dimensjoner.bredde;
var høyde = dimensjoner.høyde;
Alert ("Original Width =" + Width + "," + "Original Height =" + Height);

Produksjon

Metode 3: Få bildedimensjoner i JavaScript ved bruk av AddEventListener () -metode

“AddEventListener ()”Metode legger ved en hendelsesbehandler til et dokument. Denne metoden kan implementeres for å få tilgang til den opprettede knappen og bildet og bruke en klikkhendelse for å få bildedimensjonene på knappeklikk.

Syntaks

dokument.AddEventListener (klikk, funksjon)

I syntaks ovenfor, "Klikk”Refererer til den spesifiserte hendelsen, og“funksjon”Er funksjonen som vil bli påkalt henholdsvis.

Eksempel

Først må du lage en knapp og spesifisere bildebanen med en bestemt høyde- og breddeverdier:

Få bildedimensjoner
= "størrelse">

---

stil = "høyde: 300px; bredde: 300px;"

Få tilgang til den opprettede knappen og det spesifikke bildet ved å bruke “dokument.QuerySelector ()”Metode.

Legg deretter til arrangementet "Klikk”På knappen og bruk naturbredde og naturhøydeegenskaper for å logge ut den opprinnelige bredden og høyden på et bilde:

La BTN = dokument.QuerySelector ('Button');
La dimensjoner = dokument.QuerySelector ('#størrelse');
La IMG = dokument.QuerySelector ('IMG');
btn.AddEventListener ('klikk', () =>
dimensjoner.innertekst = 'høyde: $ img.NaturalHeight Bredde: $ IMG.NaturalWidth ';
);

Produksjon

Vi har forklart de enkleste metodene for å få bildedimensjoner i JavaScript.

Konklusjon

For å få bildedimensjoner i JavaScript, bruk "bredde”Og“høyde”Egenskaper for å lage et objekt og få tilgang til bredden og høyden på henholdsvis det spesifikke bildet, henholdsvis"dokument.QuerySelector ()”Metode og“ved trykk”Hendelse for å få tilgang til bildebanen og få sin dimensjon på knappeklikket eller“AddEventListener ()”Metode for å få tilgang til den opprettede knappen og bildet og bruke en klikkhendelse for å få de tilsvarende bildedimensjonene. Denne bloggen forklarte metodene for å få bildedimensjoner i JavaScript.