Javascript Spilletid: Høyde på Div

Javascript-funksjoner i en webside kan få og angi egenskapene til HTML-elementer. Noen ganger, når en side er satt til å endre innholdet dynamisk som brukeren samhandler med det, er det vanskelig å si på forhånd hva plass et bestemt element vil oppta. Ved å inkludere Javascript-funksjoner til å utføre under kjøring mens brukeren viser en side, kan utviklere etablere den faktiske dimensjoner okkupert av et element som en div, inkludert høyde.

CSS Høyde

Javascript-funksjoner kan få tilgang til høyde egenskapene til noen HTML-element på en side. Dette omfatter alle Cascading Style Sheet erklæringer som involverer høyde, som følgende eksempelkode demonstrerer:

. Document.getElementById ( "mydiv") style.height;

Denne koden henter CSS høydeverdien for div-elementet med "mydiv" som sitt ID-attributtet. Elementet kan vises på siden som følger:

<Div id = "mydiv" style = "height: 100px">
innhold her
</ Div>

Alternativt kan du sette CSS erklæring i en egen CSS-fil eller en seksjon i hodet på siden.

Client Høyde

Javascript kan returnere klienten høyde for en div element, noe som indikerer høyden okkupert av element på siden som det vises til brukeren ser det, som følgende kode demonstrerer:

document.getElementById ( "mydiv") clientHeight.;

Den "clientHeight" attributtet kan brukes med alle HTML-element, inkludert divs. Den omfatter ikke noen marginer, rullefelt eller grenser innenfor element, bare innholdet. Hvis en div element er rullbart, med sitt innhold ikke alle synlige samtidig, vil klienten høyde ikke indikere den totale høyde av elementet bare høyden av hva brukeren kan se.

Offset Høyde

Forskyvningen høyden på en div element er selve høyde det opptar på siden, ikke inkludert marginer, men inkludert padding og grenser, som følgende kode demonstrerer:

document.getElementById ( "mydiv") offsetHeight.;

Den "offsetHeight" eiendom gjelder for alle HTML-element, ikke bare divs. Offset og klient høyder er den samme hvis div-elementet ikke er ledsaget av rullefelt og ikke har en grense på noen av sine fire sider.

Bla Høyde

Rulle høyden på et element tillater utviklere å få tilgang til full høyde verdi uavhengig av hva som er synlig til enhver tid. Hvis en div element bruker rullefeltene for vertikal rulling, vil brukeren ikke se alt innholdet på en gang. Følgende eksempelkode demonstrerer hente hele høyden av en div element:

document.getElementById ( "mydiv") scrollHeight.;

Dette kan være nyttig i tilfeller der du trenger å vite den faktiske høyden på et element når innhold er befolket dynamisk. Hvis elementet ikke bruker rullefelt, bla høyde og klient høyde er like.