O que é offsetHeight, clientHeight, scrollHeight?


235

Pensou em explicar qual é a diferença entre offsetHeight, clientHeighte scrollHeightou offsetWidth, clientWidthe scrollWidth?

É preciso conhecer essa diferença antes de trabalhar no lado do cliente. Caso contrário, metade da vida será gasta na correção da interface do usuário.

Fiddle , ou em linha abaixo:

function whatis(propType) {
  var mainDiv = document.getElementById("MainDIV");
  if (window.sampleDiv == null) {
    var div = document.createElement("div");
    window.sampleDiv = div;
  }
  div = window.sampleDiv;
  var propTypeWidth = propType.toLowerCase() + "Width";
  var propTypeHeight = propType + "Height";

  var computedStyle = window.getComputedStyle(mainDiv, null);
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");

  div.style.position = "absolute";
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
  div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
  div.style.height = mainDiv[propTypeHeight] + "px";
  div.style.lineHeight = mainDiv[propTypeHeight] + "px";
  div.style.width = mainDiv[propTypeWidth] + "px";
  div.style.textAlign = "center";
  div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
    mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";



  div.style.background = "rgba(0,0,255,0.5)";
  document.body.appendChild(div);

}
document.getElementById("offset").onclick = function() {
  whatis('offset');
}
document.getElementById("client").onclick = function() {
  whatis('client');
}
document.getElementById("scroll").onclick = function() {
  whatis('scroll');
}
#MainDIV {
  border: 5px solid red;
}
<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>

<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
  <div style="height:400px; width:500px; overflow:hidden;">

  </div>
</div>


6
Esta questão parece estar fora do tópico, porque fornece apenas uma dica. A única pergunta está no título da 'pergunta'.
22414 enhzflep

Respostas:


544

Para saber a diferença, você precisa entender o modelo da caixa , mas basicamente:

clientHeight :

retorna a altura interna de um elemento em pixels, incluindo preenchimento, mas não a altura , borda ou margem da barra de rolagem horizontal

offsetHeight :

é uma medida que inclui as bordas do elemento , o preenchimento vertical do elemento, a barra de rolagem horizontal do elemento (se presente, se renderizada) e a altura CSS do elemento.

scrollHeight :

é uma medida da altura do conteúdo de um elemento, incluindo o conteúdo não visível na tela devido ao estouro


Vou facilitar:

Considerar:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>                                    

scrollHeight : ENTIRE content & padding (visible or not)
altura de todo o conteúdo + preenchimentos, apesar da altura do elemento.

clientHeight : VISIBLE content & padding
Apenas altura visível: parte do conteúdo limitada pela altura explicitamente definida do elemento.

offsetHeight : VISIBLE content & padding + border + scrollbar
altura ocupada pelo elemento no documento.

scrollHeight clientHeight e offsetHeight


e se você só quer altura visível
Muhammad Umer

2
A clientHeighté a altura visível #
Andre Figueiredo

9
É por isso que eu amo o SO, obrigado pelo esforço para torná-lo tão claro!
Herick

2
Nota: offsetHeight pode retornar nulo se o elemento tiver a posição: Fixed. O offsetHeight do SVG está sendo preterido no Chrome. offsetHeight retornará nulo se o elemento for exibido: none ou tiver um ancestral com display: none
Drenai

3
meu scrollHeighte clientHeightambos estão surgindo da mesma forma, apesar da tela ter mais conteúdo e uma barra de rolagem. Por quê?
blankface

5

* offsetHeight é uma medida em pixels da altura CSS do elemento, incluindo borda, preenchimento e barra de rolagem horizontal do elemento.

* A propriedade clientHeight retorna a altura visível de um elemento em pixels, incluindo preenchimento, mas não a borda, barra de rolagem ou margem.

* O valor scrollHeight é igual à altura mínima que o elemento exigiria para caber em todo o conteúdo da janela de visualização sem usar uma barra de rolagem vertical. A altura é medida da mesma maneira que clientHeight: inclui o preenchimento do elemento, mas não sua borda, margem ou barra de rolagem horizontal.

O mesmo acontece com todos esses com largura em vez de altura.


2

Minhas descrições para os três:

  • offsetHeight : quanto do espaço de "posicionamento relativo" do pai é ocupado pelo elemento. (isto é, ignora os position: absolutedescendentes do elemento )
  • clientHeight : O mesmo que offset-height, exceto que ele exclui a borda, a margem e a altura da barra de rolagem horizontal do elemento (se houver).
  • scrollHeight : Quanto espaço é necessário para ver todo o conteúdo / descendentes do elemento (incluindo position: absoluteoutros) sem rolar.

Depois, há também:


A observação sobre transformações de css é bastante importante nesse caso.
Jan Bradáč 1/12/19

0

Deslocamento Significa "a quantidade ou a distância pela qual algo está fora de linha". Margem ou Bordas são algo que torna a altura ou a largura real de um elemento HTML "fora de linha". Isso ajudará você a lembrar que:

  • offsetHeight é uma medida em pixels da altura CSS do elemento, incluindo borda, preenchimento e barra de rolagem horizontal do elemento.

Por outro lado, clientHeight é algo que você pode dizer o oposto de OffsetHeight. Não inclui a borda ou as margens. Ele inclui o preenchimento porque é algo que reside dentro do contêiner HTML, portanto não conta como medidas extras, como margem ou borda. Assim :

  • A propriedade clientHeight retorna a altura visível de um elemento em pixels, incluindo preenchimento, mas não a borda, barra de rolagem ou margem.

ScrollHeight é toda a área de rolagem; portanto, sua rolagem nunca será executada sobre sua margem ou borda; é por isso que scrollHeight não inclui margem ou bordas, mas sim preenchimento. Assim:

  • O valor scrollHeight é igual à altura mínima que o elemento exigiria para caber em todo o conteúdo na viewport sem usar uma barra de rolagem vertical. A altura é medida da mesma maneira que clientHeight: inclui o preenchimento do elemento, mas não sua borda, margem ou barra de rolagem horizontal.
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.