Hvordan henter jeg et HTML -elementets faktiske bredde og høyde?

Mens de utvikler nettsteder som bruker JavaScript, må utviklere i mange tilfeller hente en faktisk bredde og høyde på et HTML -element. For eksempel dynamisk størrelse eller posisjoneringselementer på en webside, layoutjusteringer osv.

Denne artikkelen vil forklare måtene å hente en faktisk bredde og høyde på et HTML -element.

Hvordan hente/få den faktiske høyden og bredden på HTML -elementer?

For å hente et HTML -elementets bredde og høyde, bruk følgende tilnærminger:

• Ved hjelp av "klientbredde”Og“klienthøyde" Egenskaper
• Ved hjelp av "offsetbredde”Og“avsettende" Egenskaper

Metode 1: Hent et HTML -elementets faktiske bredde og høyde ved å bruke “ClientWidth” og “ClientHeight” -egenskaper

Bruke "klientbredde”Og“klienthøyde”Egenskaper for å hente faktisk høyde og bredde på et HTML -element. "ClientWidth" og "ClientHeight" representerer dimensjonene til elementets innholdsområde, for eksempel den indre bredden og høyden på et element mens polstring, kant og margin er ekskludert.

Syntaks

Bruk følgende syntaks for å få bredden og høyden på et element som bruker "klientbredde" og "klienthøyde" -egenskaper:

element.klientbredde
element.klienthøyde

Eksempel

I en HTML -fil, bruk HTML -elementene "div”,“spenn”, Og“H4”For å vise litt tekst på siden:

> For å lære JavaScript, følg Linuxhint

Hent HTML -elementets faktiske bredde og høyde

Nå, sjekk bredden og høyden på en "div”Element. Så først, få referansen til DIV -elementet ved å bruke "getElementById ()”Metode ved å sende den tildelte IDen som et argument:

La Div = dokument.getElementById ('div');

Ring "Clientwidth" og "ClientHeight" -egenskapene med et DIV -element og lagre de resulterende verdiene i variabler "Divwidth”Og“DivHeight”:

La divWidth = div.klientbredde;
La divHeight = div.klienthøyde;

Skriv ut bredden og høyden på div på konsollen ved å bruke “konsoll.Logg()”Metode:

konsoll.log (divWidth, divHeight);

Utgangen viser bredden på div “842”Og høyden som den inneholder er“59”:

Metode 2: Hent et HTML -elementets faktiske bredde og høyde ved hjelp

For å få/hente den faktiske bredden og høyden på et element, bruk "offsetbredde”Og“avsettende" egenskaper. "Offsetwidth" og "Offsetheight" er egenskaper som gir informasjon om dimensjonene til et element mens polstring, kant og margin er inkludert.

Syntaks

Følg den gitte syntaks for "Offsetwidth" og "Offsetheight" -egenskapene:

element.offsetbredde
element.avsettende

Eksempel

Her vil vi se bredden og høyden på H4 -elementet ved å bruke "Offsetwidth" og "Offsetheight" -egenskaper:

La headingWidth = overskrift.offsetbredde;
La HeadingHeight = overskrift.avsettende;

Produksjon

Det handlet om å hente HTML -elementets faktiske bredde og høyde.

Konklusjon

For å hente en faktisk bredde og høyde på et HTML -element, bruk "klientbredde”Og“klienthøyde" eller "offsetbredde”Og“avsettende" egenskaper. “ClientWidth” og “ClientHeight” brukes til å beregne bredden og høyden på et element mens polstring, grense og margin er ekskludert. "Offsetwidth" og "offsetheight" beregner bredden og høyden på et element, inkludert grense, polstring og margin. Denne artikkelen forklarte måtene å hente en faktisk bredde og høyde på et HTML -element.