Hvordan få bredde på elementet i JavaScript
I fasen av å teste en webside eller nettstedet mens du designer, er det å få dimensjonene til de inkluderte elementene i dokumentobjektsmodellen (DOM). Denne tilnærmingen resulterer også i å få et nettsted til å skille seg ut ved å gjøre det lesbart og et generelt tilgjengelig dokumentdesign.
Denne artikkelen vil demonstrere metodene du må vurdere for beregning av bredden på et element i JavaScript.
Hvordan få bredden på et element i JavaScript?
Bredden på et element kan beregnes i JavaScript ved å bruke følgende tilnærminger:
- “offsetbredde”Eiendom.
- “klientbredde“Eiendom.
- “GetBoundingClientRect ()”Metode.
Disse tilnærmingene vil nå bli diskutert i detalj en etter en!
Metode 1: Få bredde på elementet i JavaScript ved hjelp av egenskapen til offsetbredde
Denne egenskapen kan brukes for å få tilgang til et element mot den hentet “id”Og beregne den ytre bredden.
Oversikt Følgende eksempel for demonstrasjon.
Eksempel
For det første, inkluder en "
Deretter inneholder det spesifiserte bildet i "div”Element assosiert med et“id”:
Etter det får du tilgang til det inneholdte bildet og bruk "offsetbredde”Eiendom for å beregne bredden på bildet:
var getElement = dokument.getElementById ('IMG').offsetbredde;
Etter beregningen får du tilgang til overskriftsdelen som er spesifisert før og viser bildets bredde ved å bruke "Innertekst”Eiendom:
var get = dokument.getElementById ("hode")
få.innertekst = "Bredden på elementet er:" + getElement;
få.innertekst = "Bredden på elementet er:" + bredde;
Produksjon
Metode 2: Få bredde på elementet i JavaScript ved hjelp av klientbredden
Eiendom
Denne egenskapen kan også implementeres på samme måte som den forrige tilnærmingen. Hovedforskjellen er at den beregner den indre bredden på det spesifiserte elementet.
Eksempel
Først, gjenoppliv de ovennevnte diskuterte metodene for å inkludere en overskrift:
Få bredde på HTML -element ved hjelp av JavaScript
I dette spesielle eksemplet, inkluderer den spesifiserte overskriften som er inneholdt i "div”Element spesifisert av“id”. Denne spesielle overskriften vil bli beregnet på for “bredde”:
Dette er et overskriftselement
Denne spesielle taggen refererer til den beregnede bredden som skal vises på DOM:
<H4 id = "status">H4><br>
Lag nå en knapp med en vedlagt “ved trykk”Hendelse som påkaller funksjonen getWidth ():
Til slutt, definer en funksjon som heter “getWidth ()”. Her kan du hente overskriften for å bli beregnet for bredde. I neste trinn, bruk "klientbredde”Eiendom for å utføre den uttalte operasjonen og på samme måte,“Innertekst”Eiendom vil vise bredden på overskriften:
funksjon getWidth ()
var getElement = dokument.getElementById ('MyElement');
var get = dokument.getElementById ("Status")
var bredde = getElement.klientbredde;
få.innertekst = "Bredden på elementet er" + bredde + "px";
Produksjon
Metode 3: Få bredde på elementet i JavaScript ved bruk av GetBoundingClientRect () -metoden
Denne metoden returnerer størrelsen på et element. Denne metoden kan integreres med "bredde”Eiendom for å måle bredden på inngangsfeltet.
Se på følgende eksempel.
Eksempel
Først, inneholder en inngang "tekst”Felt med den spesifiserte plassholderverdien og den vedlagte hendelsen”onmouseover”:
Nå, definer en funksjon som heter “getWidth ()”Og tilgang til det spesifiserte inngangsfeltet. Dette inngangsfeltet vil bli beregnet for størrelse og bredde ved å bruke "GetBoundingClientRect ()”Metode og breddeegenskapen henholdsvis.
Til slutt, vis den beregnede bredden:
funksjon getWidth ()
var getElement = dokument.getElementById ('felt');
var posisjon = getElement.getBoundingClientRect ();
var bredde = posisjon.bredde;
Varsel (bredde);
Produksjon
Denne oppskrivningen forklarte metodene for å beregne elementets bredde i JavaScript.
Konklusjon
“offsetbredde”Eiendom,“klientbredde“Eiendom eller“GetBoundingClientRect ()”Metode kan velges for å få bredden på et element i JavaScript. “offsetbredde”Eiendom kan brukes til å returnere elementets ytre bredde,“klientbredde“Eiendom kan brukes til å beregne den indre bredden på det spesifiserte elementet eller“GetBoundingClientRect ()”Kan velges for beregning av størrelsen på det spesifiserte elementet og trekke ut bredden fra det. Denne oppskrivningen demonstrerte metodene for å beregne bredden på et element i JavaScript.