Às vezes, no projeto, você usa o JS para obter posições de elemento para localizar elementos. Primeiro, use a imagem para explicar a relação entre scrollwidth, largura do cliente e compensação.
Uma breve introdução ao JS obtendo várias larguras e alturas :
ScrolHeight: obtém a altura de rolagem do objeto.
Rollleft: defina ou obtenha a distância entre o limite esquerdo do objeto e a extremidade mais à esquerda do conteúdo atualmente visível na janela
ScrollTop: defina ou obtenha a distância entre a parte superior do objeto e a parte superior do conteúdo visível na janela
Scrollwidth: obtenha a largura de rolagem do objeto
Offsetheight: obtém a altura do objeto em relação ao layout ou à coordenada pai especificada pela propriedade de coordenadas dos pais OffsetParent
OffsetLeft: obtém a posição esquerda calculada do objeto em relação ao layout ou coordenadas dos pais especificados pela propriedade OffsetParent
OffsetTop: obtém a posição superior calculada do objeto em relação ao layout ou à coordenada pai especificada pela propriedade OffsetTop
Event.ClientX Coordenadas horizontais em relação ao documento
Event.Clienty Coordenadas verticais em relação ao documento
Event.offsetx Coordenadas horizontais em relação ao contêiner
Event.offsety Coordenadas verticais em relação ao contêiner
document.documentElement.scrolltop o valor de rolar verticalmente
event.clientx + document.documentElement.scrolltop em relação à coordenada horizontal do documento + a quantidade de rolagem na direção vertical
O acima refere -se principalmente ao IE, e as diferenças no Firefox são as seguintes:
Ie6.0, ff1.06+:
ClientWidth = Width + Padding
ClientHeight = altura + preenchimento
OffsetWidth = Width + Padding + Border
OffsetHeight = altura + preenchimento + borda
IE5.0/5.5:
ClientWidth = Width - Border
ClientHeight = altura - borda
OffsetWidth = Largura
OffsetHeight = altura
(Deve -se mencionar que o atributo de margem no CSS não tem nada a ver com largura de cliente, compensação, altura do cliente e fora do peso)
largura de deslocamento (largura+preenchimento+borda)
Suponha que o OBJ seja um controle HTML.
obj.offsettop refere -se à posição, número inteiro, pixel de unidade do OBJ ao controle superior ou superior.
obj.offsetleft refere -se à posição, número inteiro, pixel de unidade do OBJ para o controle esquerdo ou superior.
obj.offsetWidth refere -se à largura, número inteiro e pixels unitários do próprio OBJ controlam. Recebe a largura do conteúdo visível do objeto, excluindo barras de rolagem e fronteiras;
Obj.offsetHeight refere -se à altura, número inteiro, pixel da unidade do próprio OBJ controlam.
A diferença entre offsetwidth e style.width
1. O OffsetTop retorna um número, enquanto o estilo.top retorna uma string, que também contém a unidade: px além do número.
2. O OffsetTop é somente leitura, enquanto Style.top é leitura.
3. Se nenhum estilo superior for especificado para elementos HTML, o estilo.top retorna uma string vazia.