IL offsetHeight è una proprietà DOM HTML, utilizzata dal linguaggio di programmazione JavaScript. Restituisce l'altezza visibile di un elemento in pixel che include l'altezza del contenuto visibile, del bordo, del riempimento e della barra di scorrimento, se presente. offsetHeight viene spesso utilizzato con la proprietà offsetWidth. IL offsetWidth è un'altra proprietà del DOM HTML, che è quasi uguale a offsetHeight. Queste proprietà vengono utilizzate da JavaScript per trovare l'altezza e la larghezza visibili degli elementi HTML.
offsetHeight è una combinazione dei seguenti elementi HTML:
offsetHeight = height + border + padding + horizontal scrollbar
D'altra parte, offsetWidth include i seguenti elementi:
offsetWidth = width + border + padding + vertical scrollbar
Ricorda una cosa: offsetHeight e offsetWidth non includono il margine, né il margine superiore né il margine inferiore. Queste proprietà DOM vengono utilizzate da Linguaggio di programmazione JavaScript per calcolare la dimensione degli elementi HTML in pixel.
Con l'aiuto del diagramma seguente puoi comprendere molto meglio offsetHeight e offsetWidth:
matrici nella programmazione c
Supporto del browser
La proprietà DOM offsetHeight è supportata da diversi browser Web, come Chrome e Internet Explorer. Di seguito sono riportati alcuni browser che supportano le proprietà offsetHeight e offsetWidth.
| Navigatore |  Cromo |  Internet Explorer |  Firefox |  musica lirica |  Safari |  Bordo |
| supporto offsetHeight | SÌ | SÌ | SÌ | SÌ | SÌ | SÌ |
Sintassi
Di seguito è riportata una semplice sintassi di offsetHeight:
element.offsetHeight
Qui, l'elemento è una variabile creata in JavaScript per contenere i valori delle proprietà CSS o il paragrafo di testo HTML.
Valori restituiti
offsetHeight e offsetWidth restituiscono rispettivamente l'altezza e la larghezza calcolate degli elementi HTML in pixel.
Esempi
Di seguito è riportato un elenco di alcuni esempi. Con l'aiuto del quale vedremo come viene utilizzata e funziona la proprietà offsetHeight.
Esempio 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit Produzione
Vedi l'output seguente contenente un paragrafo evidenziato in giallo e un pulsante di invio. Fare clic su questo Invia pulsante e calcolare l'offsetHeight di questo paragrafo.
stringa su jsonobject
Output prima di fare clic sul pulsante Invia
Output dopo aver fatto clic sul pulsante Invia
L'offsetHeight calcolato verrà visualizzato all'interno di quest'area evidenziata in giallo.
Esempio 2
In questo esempio, calcoleremo offsetHeight per un paragrafo fornito in questo esempio insieme allo stile CSS. Ricorda che offsetHeight non includerà il margine.
conversione della stringa in int java
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Produzione
Vedi l'output seguente contenente un paragrafo evidenziato in rosa e un pulsante di invio. Fare clic su questo Calcola offsetHeight pulsante e calcolare l'offsetHeight di questo paragrafo.
Output prima di fare clic sul pulsante Calcola offsetAltezza
Output dopo aver fatto clic sul pulsante Calcola offsetAltezza
L'offsetHeight calcolato verrà visualizzato all'interno di quest'area evidenziata in rosa. Nello screenshot seguente, puoi vedere che offsetHeight per il paragrafo specificato è 230px.
Esempio 3 senza stile CSS
Vedi un altro esempio di calcolo di offsetHeight. Non abbiamo incluso alcuno stile CSS come altezza, larghezza, margine, riempimento, ecc., tranne il colore di sfondo. Quindi, il paragrafo sarà un semplice paragrafo senza stile.
Java confronta la stringa
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Produzione
Vedere l'output seguente contenente un paragrafo evidenziato in arancione e un pulsante di invio per calcolare offsetHeight. Fare clic su questo Calcola offsetHeight pulsante e calcolare l'offsetHeight di questo paragrafo.
Prima di fare clic sul pulsante Calcola offsetAltezza
Dopo aver fatto clic sul pulsante Calcola offsetAltezza
Nello screenshot seguente, puoi vedere che offsetHeight per il paragrafo specificato è 88px.
Calcola sia offsetHeight che offsetWidth
In questo esempio, li calcoleremo entrambi offsetHeight E offsetWidth per un paragrafo all'interno di una scheda div. Quindi, puoi capire quanto diversamente hanno calcolato. Qui utilizzeremo i CSS e passeremo l'altezza, la larghezza, il margine, il riempimento, ecc. per lo stile in questo esempio.
Copia ed esegui il codice seguente sul tuo sistema per capire meglio.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit Produzione
Vedere l'output seguente contenente un paragrafo nell'area colorata evidenziata in azzurro e un pulsante di invio. Fare clic su questo Invia pulsante e calcolare offsetHeight e offsetWidth di questo paragrafo.
Output prima di fare clic sul pulsante Invia
Dopo aver cliccato su Invia pulsante, l'offsetHeight calcolato è 210px e l'offsetWidth è 430px visualizzati all'interno di quest'area evidenziata in azzurro. Vedere l'output di seguito.
aprire un file con Java
Output dopo aver fatto clic sul pulsante Invia
Hai visto diversi esempi con parametri di calcolo diversi. In questi vari esempi abbiamo passato il paragrafo di testo con o anche senza stile CSS e poi calcolato separatamente offsetHeight e offsetWidth.