Le décalageHauteur est une propriété HTML DOM utilisée par le langage de programmation JavaScript. Il renvoie la hauteur visible d'un élément en pixels qui inclut la hauteur du contenu visible, la bordure, le remplissage et la barre de défilement le cas échéant. Le offsetHeight est souvent utilisé avec la propriété offsetWidth. Le décalageLargeur est une propriété supplémentaire du DOM HTML, qui est presque identique à offsetHeight. Ces propriétés sont utilisées par JavaScript pour trouver la hauteur et la largeur visibles des éléments HTML.
Le offsetHeight est une combinaison des éléments HTML suivants :
offsetHeight = height + border + padding + horizontal scrollbar
D'autre part, offsetWidth comprend les éléments suivants :
offsetWidth = width + border + padding + vertical scrollbar
N'oubliez pas une chose : offsetHeight et offsetWidth n'incluent pas de marge, ni de marge supérieure ni de marge inférieure. Ces propriétés DOM sont utilisées par Langage de programmation JavaScript pour calculer la dimension des éléments HTML en pixels.
exception lancer java
À l'aide du diagramme ci-dessous, vous pouvez bien mieux comprendre offsetHeight et offsetWidth :
Prise en charge du navigateur
La propriété DOM offsetHeight est prise en charge par plusieurs navigateurs Web, comme Chrome et Internet Explorer. Voici quelques navigateurs prenant en charge les propriétés offsetHeight et offsetWidth.
| Navigateur |  Chrome |  Internet Explorer |  Firefox |  Opéra |  Safari |  Bord |
| Prise en charge de offsetHeight | Oui | Oui | Oui | Oui | Oui | Oui |
Syntaxe
Vous trouverez ci-dessous une syntaxe simple de offsetHeight :
element.offsetHeight
Ici, l'élément est une variable créée en JavaScript pour contenir les valeurs des propriétés CSS ou le paragraphe de texte HTML.
Valeurs de retour
offsetHeight et offsetWidth renvoient respectivement la hauteur et la largeur calculées des éléments HTML en pixels.
Exemples
Vous trouverez ci-dessous une liste de quelques exemples. À l’aide de quoi, nous verrons comment la propriété offsetHeight est utilisée et fonctionne.
Exemple 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 Sortir
Consultez le résultat ci-dessous contenant un paragraphe surligné en jaune et un bouton d'envoi. Cliquez dessus Soumettre et calculez le offsetHeight de ce paragraphe.
Sortie avant de cliquer sur le bouton Soumettre
différence entre deux chaînes python
Sortie après avoir cliqué sur le bouton Soumettre
La hauteur de décalage calculée s'affichera à l'intérieur de cette zone surlignée en jaune.
Exemple 2
Dans cet exemple, nous calculerons le offsetHeight pour un paragraphe fourni dans cet exemple avec le style CSS. N'oubliez pas que offsetHeight n'inclura pas de marge.
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 Sortir
Consultez le résultat ci-dessous contenant un paragraphe en surbrillance rose et un bouton d'envoi. Cliquez dessus Calculer la hauteur du décalage et calculez le offsetHeight de ce paragraphe.
Sortie avant de cliquer sur le bouton Calculer offsetHeight
Sortie après avoir cliqué sur le bouton Calculer offsetHeight
Le offsetHeight calculé s’affichera à l’intérieur de cette zone en surbrillance rose. Dans la capture d'écran ci-dessous, vous pouvez voir que offsetHeight pour le paragraphe donné est de 230 pixels.
Exemple 3 sans style CSS
Voir un autre exemple de calcul de offsetHeight. Nous n'avons inclus aucun style CSS comme la hauteur, la largeur, la marge, le remplissage, etc., attendez-vous à la couleur d'arrière-plan. Ainsi, le paragraphe sera un simple paragraphe sans style.
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 Sortir
ajouter une chaîne java
Consultez le résultat ci-dessous contenant un paragraphe en surbrillance orange et un bouton d'envoi pour calculer le offsetHeight. Cliquez dessus Calculer la hauteur du décalage et calculez le offsetHeight de ce paragraphe.
Avant de cliquer sur le bouton Calculer offsetHeight
Après avoir cliqué sur le bouton Calculer offsetHeight
Dans la capture d'écran ci-dessous, vous pouvez voir que offsetHeight pour le paragraphe donné est de 88 pixels.
Calculer à la fois offsetHeight et offsetWidth
Dans cet exemple, nous calculerons à la fois décalageHauteur et décalageLargeur pour un paragraphe dans un onglet div. Ainsi, vous pouvez comprendre à quel point ils ont calculé différemment. Ici, nous utiliserons CSS et transmettrons la hauteur, la largeur, la marge, le remplissage, etc. pour le style dans cet exemple.
Copiez et exécutez le code ci-dessous sur votre système pour mieux comprendre.
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 Sortir
enum tostring java
Consultez le résultat ci-dessous contenant un paragraphe dans une zone de couleur surlignée en bleu clair et un bouton d'envoi. Cliquez dessus Soumettre et calculez le offsetHeight et le offsetWidth de ce paragraphe.
Sortie avant de cliquer sur le bouton Soumettre
Après avoir cliqué sur le Soumettre bouton, le offsetHeight calculé est de 210 px et le offsetWidth est de 430 px, affiché à l'intérieur de cette zone en surbrillance bleu clair. Voir la sortie ci-dessous.
Sortie après avoir cliqué sur le bouton Soumettre
Vous avez vu plusieurs exemples ayant des paramètres de calcul différents. Dans ces différents exemples, nous avons passé le paragraphe de texte avec ou également sans style CSS puis calculé séparément offsetHeight et offsetWidth.