Hvordan sette dimensjoner av HTML -elementer ved hjelp av jQuery

Å sette dimensjonene til HTML -elementer riktig er svært viktig når du strukturerer utformingen av en webside fordi de riktige dimensjonene forbedrer det generelle utseendet til nettstedet ditt som til gjengjeld øker brukeropplevelsen. JQuery gir mange metoder som hjelper deg med å utføre denne oppgaven med stor letthet.

Dimensjoner av HTML-elementer kan settes ved hjelp av de under-nevnte jQuery-metodene.

1. bredde () -metode
2. Høyde () Metode
3. InnnerWidth () Metode
4. InnnerHeight () -metode
5. ytre bredde () -metode
6. OuterHeight () -metode

La oss utforske dem i detalj.

bredde () -metode

For å sette eller hente bredden på HTML -elementer, brukes bredden () -metoden.

Denne metoden fungerer på en måte som når den bare brukes til å hente bredden på et element, den returnerer bredden på det første matchede elementet, men når det brukes til å sette bredden, setter den bredden på alle matchede elementer.

Syntaks

For å hente bredden på et element.

$ (velger).bredde()

For å sette bredden på et element.

$ (velger).bredde (verdi)

Eksempel

Anta at du vil endre bredden på et element ved hjelp av jQuery -bredde () -metoden. Bruk koden nedenfor.

Html

Sett bredde

I ovennevnte HTML -kode har vi opprettet et og et element. Videre har vi gitt en viss stil til elementet ved hjelp av inline CSS.

jQuery

$ (dokument).klar (funksjon ()
$ ("#knapp").klikk (funksjon ()
$ ("Div").bredde (500);
);
);

I denne jQuery -koden brukes bredde () -metoden for å angi en ny bredde på elementet til 500px.

Produksjon

Før du klikker på knappen.

Etter å ha klikket på knappen.

Bredden på elementet er endret.

Heigth () -metode

Denne metoden fungerer på en lignende måte som bredde () -metoden, med den åpenbare forskjellen at den brukes til å gi eller hente høyden på HTML -elementer.

Denne metoden fungerer også på en måte som når den bare brukes til å hente høyden på et element, den trekker ut høyden på det første elementet som samsvarer elementer.

Syntaks

For å hente høyden på et element.

$ (velger).høyde()

For å sette høyden på et element

$ (velger).Høyde (verdi)

Eksempel

Anta at du vil angi litt høyde på et element ved hjelp av jQuery Height () -metoden. Følg koden nedenfor.

Html

Skriv inn navnet ditt:


Vis høyden på inngangsfeltet

Her har vi opprettet, et inngangsfelt og satt en høyde på 10px, bredde på 200px og bakgrunnsfarge rosa.

Dessuten har vi laget en knapp.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("input").høyde (20);
);
);

Vi har brukt JQuery Height () -metoden her for å endre høyden på inngangsfeltet. Høyden vil endres når du klikker på knappen.

Produksjon

Før du klikker på knappen.

Etter at knappen er klikket.

Høyde () -metoden fungerer som den skal.

InnerWidth () Metode

For å hente den indre bredden på det første elementet som samsvarer med det spesifiserte elementet, brukes den indre bredden () metoden.

Syntaks

$ (velger).Innerwidth ()

Eksempel

Anta at du vil vise innerbredden til et bilde. Bruk følgende kode.

Html

Vis den indre bredden på bildet

Her har vi vist et bilde ved hjelp av taggen, dessuten har vi satt høyde, bredde, polstring og kant. Sammen med bildet har vi også laget en knapp som skal brukes til å vise den indre bredden på bildet.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
Varsel ("Indre bredde på bildet:" + $ ("IMG").innerwidth ());
);
);

I koden ovenfor bruker vi metoden innerwidth () for å vise den indre bredden på bildet.

Produksjon

Før knappen er klikket.

Etter at knappen er klikket.

Den indre bredden på bildet er vist.

Merk: Metoden i innerbredden () inkluderer også polstring mens du viser innerbredden på et element.

InnerHeight () -metode

Metoden InnerHeight () brukes til å hente den indre høyden på det første elementet som samsvarer med det spesifiserte elementet.

Syntaks

$ (velger).InnerHeight ()

Eksempel

Vi skal bruke eksemplet som brukes i ovennevnte avsnitt for å forstå arbeidet med jQuery InnerHeight () -metoden.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
Varsel ("Innerhøyde på bildet:" + $ ("IMG").indreHeight ());
);
);

Vi har brukt metoden InnerHeight () for å trekke ut den indre høyden på hundebildet.

Produksjon

Før du klikker på knappen.

Etter at du har klikket på knappen.

Metoden InnerHeight () fungerer som den skal.

Merk: Metoden InnerHeight () inkluderer også polstring mens du viser innerhøyden på et element.

ytre bredde () -metode

For å hente den ytre bredden på det første elementet som samsvarer med det spesifiserte elementet, brukes ytre bredde () -metoden.

Syntaks

$ (velger).ytre bredde ()

Eksempel

Anta at du vil trekke ut den ytre bredden på et DIV -element. Slik gjør du det.

Html

Ytre bredde på div

Vi har laget en div og gitt den en viss bakgrunnsfarge, høyde, bredde, polstring og kant. Videre har vi også opprettet en knapp.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
Varsel ("Ytre bredde på Div:" + $ ("Div").ytre bredde ());
);
);

Her har vi brukt JQuery Outerwidth () -metoden for å vise den ytre bredden på DIV -elementet.

Produksjon

Før knappen blir klikket.

Når knappen er klikket.

Outerwidth () -metoden fungerer som den skal.

Merk: Outerbredde () -metoden beregner polstring i tillegg til grensen mens du viser ytre bredde på et element.

OuterHeight () -metode

OuterHeight () -metoden brukes til å hente den ytre høyden på det første elementet som samsvarer med det spesifiserte elementet.

Syntaks

$ (velger).OuterHeight ()

Eksempel

Vi skal bruke eksemplet som brukes i ovennevnte avsnitt for å forstå arbeidet med jQuery OuterHeight () -metoden.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
Varsel ("Ytre høyde av Div:" + $ ("Div").ytreHeight ());
);
);

Vi har brukt OuterHeight () -metoden for å trekke ut den ytre høyden på DIV -elementet.

Produksjon

Før du klikker på knappen.

Etter at du har klikket på knappen.

OuterHeight () -metoden fungerer som den skal.

Merk: OuterHeight () -metoden inkluderer også polstring i tillegg til grensen mens du viser den ytre høyden på et element.

Konklusjon

Dimensjonene til et HTML -element kan settes ved hjelp av de forskjellige jQuery -metodene som er; Bredde (), høyde (), InnerWidth (), InnerHeight (), Outerwidth () og OuterHeight (). Bredde () og høyde () metoder setter eller henter henholdsvis bredden og høyden på elementer. Mens innerbredden (), InnerHeight (), YtreWidth () og OuterHeight () -metoden henter henholdsvis indre bredde, indre høyde, ytre bredde og ytre høyde på de første matchede elementene. Alle disse metodene blir forklart i detalj sammen med de relevante eksemplene.