Come determinare Font Altezza in JavaScript

September 17

Come determinare Font Altezza in JavaScript


Utilizzando funzioni JavaScript all'interno di una pagina Web, è possibile determinare e impostare le proprietà di foglio di stile CSS di qualsiasi elemento. Una funzione JavaScript può accedere a qualsiasi elemento di pagina specificata, e poi tornare informazioni su di esso. Per scoprire l'altezza di un elemento di testo all'interno di una pagina, è possibile utilizzare sia la proprietà "offsetHeight", a seconda di quello che si pensa di utilizzare le informazioni per "clientHeight" e. Scoprire carattere o altezza del testo in JavaScript è semplice, con poche righe di codice necessarie.

istruzione

1 Crea la tua pagina Web HTML. Se non si dispone già di una pagina, inserire il seguente schema in un nuovo file e salvarlo con l'estensione ".html":

<Html>

<Head>

<Style type = "text / css">

body {font-size: 14px;}

</ Style>

<Script type = "text / javascript">

// funzioni JavaScript qui

</ Script>

</ Head>

<Body>

<Div id = "content"> testo </ div>

</ Body>

</ Html>

La pagina contiene un elemento semplice "div", che è stato designato all'interno della zona CSS nella testa pagina. La testa di pagina contiene anche una zona per il codice JavaScript.

2 Inserire una funzione JavaScript all'interno della sezione di pagina di testa. Tra l'apertura e chiusura tag "script", inserire la funzione il seguente schema per il codice JavaScript:

Funzione getTextHeight (elemID) {

// Implementazione funzione qui

}

Questa funzione sta andando a prendere l'ID di un particolare elemento HTML nella pagina come un parametro e quindi determinare la dimensione del testo all'interno di esso.

3 Utilizzare la funzione JavaScript per ottenere un riferimento all'elemento siete interessati a Aggiungere la seguente fra parentesi di apertura e chiusura della vostra funzione, individuare l'elemento indicato dal valore ID passato e l'acquisizione di un riferimento ad esso.:

var fontElem = document.getElementById (elemID);

La variabile "fontElem" ora contiene un riferimento all'elemento, che è possibile utilizzare per accedere alle informazioni su di esso.

4 Scopri l'altezza del vostro elemento HTML. Ci sono due proprietà il codice JavaScript può scoprire che sono suscettibili di essere più utile a voi. Il "clientHeight" indica l'altezza totale del testo o altri contenuti all'interno dell'elemento, ma non include i bordi o margini. Si accede come segue:

var = elemHeight fontElem.clientHeight;

Il "offsetHeight" calcola l'altezza comprese le frontiere e margini, accessibili nel modo seguente:

var = elemHeight fontElem.offsetHeight;

È possibile verificare la funzione in uscita il valore stabilito:

alert ( "Altezza:" + elemHeight);

5 Chiamate il vostro funzione JavaScript. L'area di JavaScript definisce ora una funzione, ma la funzione deve essere chiamata per la sua esecuzione. Modificare il tag di apertura del corpo nella vostra pagina come segue:

<Body onload = "getTextHeight ( 'content')">

La vostra chiamata di funzione specifica la ID elemento passando come parametro alla funzione. Salvare il file e aprirlo in un browser per testarlo.

Consigli e avvertenze

  • Utilizzando il metodo JavaScript "getElementsByTagName" è possibile identificare gli elementi in base al tipo invece di ID.
  • Le pagine Web non dovrebbero fare affidamento su JavaScript come alcuni utenti non l'hanno attivato nei loro browser.