O deslocamentoAltura é uma propriedade HTML DOM, usada pela linguagem de programação JavaScript. Ele retorna a altura visível de um elemento em pixels que inclui a altura do conteúdo visível, borda, preenchimento e barra de rolagem, se presente. O offsetHeight é frequentemente usado com a propriedade offsetWidth. O deslocamentoLargura é mais uma propriedade do HTML DOM, que é quase igual ao offsetHeight. Essas propriedades são usadas pelo JavaScript para encontrar a altura e largura visíveis dos elementos HTML.
O offsetHeight é uma combinação dos seguintes elementos HTML:
offsetHeight = height + border + padding + horizontal scrollbar
Por outro lado, o offsetWidth inclui os seguintes elementos:
offsetWidth = width + border + padding + vertical scrollbar
Lembre-se de uma coisa: offsetHeight e offsetWidth não incluem margem, nem margem superior nem margem inferior. Essas propriedades DOM são usadas por Linguagem de programação JavaScript para calcular a dimensão dos elementos HTML em pixels.
Com a ajuda do diagrama abaixo você pode entender offsetHeight e offsetWidth muito melhor:
Suporte ao navegador
A propriedade DOM offsetHeight é suportada por vários navegadores da web, como Chrome e Internet Explorer. A seguir estão alguns navegadores que suportam as propriedades offsetHeight e offsetWidth.
| Navegador |  cromada |  Internet Explorer |  Raposa de fogo |  Ópera |  Safári |  Borda |
| suporte offsetHeight | Sim | Sim | Sim | Sim | Sim | Sim |
Sintaxe
Abaixo está uma sintaxe simples de offsetHeight:
element.offsetHeight
Aqui, elemento é uma variável criada em JavaScript para conter os valores das propriedades CSS ou parágrafo de texto HTML.
Valores de retorno
O offsetHeight e o offsetWidth retornam a altura e a largura calculadas dos elementos HTML em pixels, respectivamente.
Exemplos
Abaixo está uma lista de alguns exemplos. Com a ajuda disso veremos como a propriedade offsetHeight é usada e funciona.
remover o último caractere da string
Exemplo 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 Saída
Veja a saída abaixo contendo um parágrafo em destaque em amarelo e um botão de envio. Clique aqui Enviar botão e calcule o offsetHeight deste parágrafo.
Saída antes de clicar no botão Enviar
Saída após clicar no botão Enviar
java converte char para string
O offsetHeight calculado será exibido dentro desta área destacada em amarelo.
Exemplo 2
Neste exemplo, calcularemos o offsetHeight para um parágrafo fornecido neste exemplo junto com o estilo CSS. Lembre-se de que offsetHeight não incluirá margem.
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 Saída
Veja a saída abaixo contendo um parágrafo em destaque em rosa e um botão de envio. Clique aqui Calcular offsetHeight botão e calcule o offsetHeight deste parágrafo.
Saída antes de clicar no botão Calcular offsetHeight
Saída após clicar no botão Calcular offsetHeight
O offsetHeight calculado será exibido dentro desta área destacada em rosa. Na captura de tela abaixo, você pode ver que offsetHeight para o parágrafo fornecido é 230px.
Exemplo 3 sem estilo CSS
Veja outro exemplo de cálculo do offsetHeight. Não incluímos nenhum estilo CSS como altura, largura, margem, preenchimento, etc., exceto cor de fundo. Portanto, o parágrafo será um parágrafo simples, sem estilo.
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 Saída
runas no powershell
Veja a saída abaixo contendo um parágrafo em destaque em laranja e um botão enviar para calcular o offsetHeight. Clique aqui Calcular offsetHeight botão e calcule o offsetHeight deste parágrafo.
Antes de clicar no botão Calcular offsetHeight
Depois de clicar no botão Calcular offsetHeight
Na captura de tela abaixo, você pode ver que offsetHeight para o parágrafo fornecido é 88px.
Calcule offsetHeight e offsetWidth
Neste exemplo, calcularemos ambos deslocamentoAltura e deslocamentoLargura para um parágrafo dentro de uma guia div. Então, você pode entender como eles calcularam de maneira diferente. Aqui, usaremos CSS e passaremos altura, largura, margem, preenchimento, etc. para estilizar neste exemplo.
Copie e execute o código abaixo em seu sistema para entender melhor.
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 Saída
Veja a saída abaixo contendo um parágrafo na área de cor destacada em azul claro e um botão de envio. Clique aqui Enviar botão e calcule o offsetHeight e offsetWidth deste parágrafo.
Saída antes de clicar no botão Enviar
Depois de clicar no Enviar botão, o offsetHeight calculado é 210px e offsetWidth é 430px exibido dentro desta área destacada em azul claro. Veja a saída abaixo.
Saída após clicar no botão Enviar
Você viu vários exemplos com diferentes parâmetros de cálculo. Nestes vários exemplos, passamos o parágrafo do texto com ou sem estilo CSS e depois calculamos separadamente o offsetHeight e o offsetWidth.