Slik finner du ut Font Høyde i Javascript

December 21

Ved hjelp av Javascript-funksjoner i en Web-side, kan du bestemme og sette Cascading Style Sheet egenskaper av noe element. En Javascript-funksjonen kan få tilgang til en spesifisert side element, og deretter returnere informasjon om det. For å finne ut høyden på en tekst element på en side, kan du bruke både "clientHeight" og "offsetHeight" egenskaper, avhengig av hva du har planer om å bruke informasjonen til. Finne ut skrift eller teksthøyde i Javascript er grei, med bare noen få linjer med kode nødvendig.

Bruksanvisning

1 Lag din HTML-webside. Hvis du ikke allerede har en side, skriver du inn følgende linjer i en ny fil og lagre den med "HTML" forlengelse:

<Html>

<Head>

body {font-size: 14px;}

</ Style>

Javascript-funksjoner her //

</ Script>

</ Head>

<Body>

<Div id = "innhold"> Tekst </ div>

</ Body>

</ Html>

Siden inneholder en enkel "div" element som har blitt stylet i CSS-området på siden hodet. Siden hodet inneholder også et område for Javascript-kode.

2 Skriv inn en Javascript-funksjon i siden hodet delen din. Mellom åpning og lukking "script" koder, skriver du inn følgende funksjon disposisjon for Javascript-kode:

funksjon getTextHeight (elemId) {

// Funksjon gjennomføringen her

}

Denne funksjonen kommer til å ta ID-en bestemt HTML-element på siden som en parameter og deretter bestemme størrelsen på teksten i den.

3 Bruk Javascript-funksjonen for å få en henvisning til elementet du er interessert i Legg til følgende mellom funksjonens åpning og lukking parentes, finne elementet indikert av bestått ID verdi og anskaffe en referanse til det.:

Var fontElem = document.getElementById (elemId);

Den "fontElem" variable har nå en referanse til elementet, som du kan bruke for å få tilgang til informasjon om det.

4 Finn ut høyden på HTML-elementet. Det er to eiendommer Javascript-koden kan finne ut som trolig vil være mest nyttig for deg. Den "clientHeight" indikerer den totale høyden på teksten eller annet innhold innenfor element, men det inkluderer ikke grenser eller marginer. Det er tilgjengelige på følgende måte:

Var elemHeight = fontElem.clientHeight;

Den "offsetHeight" beregner høyden inkludert grenser og marginer, tilgjengelig som følger:

Var elemHeight = fontElem.offsetHeight;

Du kan teste funksjonen ved å gi ut verdien etablert:

alert ( "Høyde:" + elemHeight);

5 Ring Javascript-funksjonen. Javascript området ditt definerer nå en funksjon, men funksjonen må kalles for å utføre. Alter åpningen body-koden på siden din som følger:

Din funksjon samtalen er å spesifisere element-ID ved å sende det som en parameter til funksjonen. Lagre filen og åpne den i en nettleser for å teste den.

Hint

Bruke Javascript "getElementsByTagName" metode du kan identifisere elementer avhengig av type i stedet for ID.
Web-sider bør ikke stole på Javascript som noen brukere ikke har det aktivert i nettleseren.