Suponha que obj seja um controle HTML
obj.offsetTop refere-se à posição superior calculada de obj em relação ao layout ou à coordenada pai especificada pelo atributo offsetParent, inteiro, pixel unitário.
obj.offsetLeft refere-se à posição esquerda calculada de obj em relação ao layout ou à coordenada pai especificada pelo atributo offsetParent, inteiro, pixel unitário.
obj.offsetWidth refere-se à largura absoluta do próprio controle obj, excluindo a parte não exibida devido ao overflow, ou seja, a largura que ele realmente ocupa, número inteiro, pixel unitário.
obj.offsetHeight refere-se à altura absoluta do próprio controle obj, excluindo a parte não exibida devido ao overflow, ou seja, a altura que ele realmente ocupa, número inteiro, pixel unitário.
Vamos explicar o offsetParent mencionado anteriormente.
offsetParent Obtém uma referência ao objeto contêiner que define as propriedades offsetTop e offsetLeft do objeto. offsetTop e offsetParent são muito complicados, navegadores diferentes têm interpretações diferentes e as interpretações são diferentes quando flutuantes, então geralmente só precisamos entender que a posição absoluta do controle no navegador pode ser obtida através dos dois.
As propriedades acima também são válidas no FireFox.
Além disso: o que estamos falando aqui se refere ao valor do atributo do controle HTML, não a document.body. O valor de document.body tem diferentes interpretações em diferentes navegadores (na verdade, a maioria dos ambientes é causada por diferentes interpretações de document. body , não devido a diferentes interpretações de offset)
Sabemos que offsetTop pode obter a posição do elemento HTML do elemento superior ou externo, e style.top também pode ser usado. A diferença entre os dois é:
1. offsetTop retorna um número, enquanto style.top retorna uma string. Além do número, também possui a unidade: px.
2. offsetTop é somente leitura, enquanto style.top é legível e gravável.
3. Se o estilo superior não for especificado para o elemento HTML, style.top retornará uma string vazia.
O mesmo se aplica a offsetLeft e style.left, offsetWidth e style.width, offsetHeight e style.height.
altura do cliente
Todos não têm objeções ao clientHeight. Todos pensam que é a altura da área visível do conteúdo, ou seja, a altura da área onde o conteúdo pode ser visto no navegador da página. é a área abaixo da última barra de ferramentas e acima da barra de status. Não tem nada a ver com o conteúdo da página.
deslocamentoAltura
IE e Opera acreditam que offsetHeight = clientHeight + barra de rolagem + borda.
NS e FF consideram offsetHeight a altura real do conteúdo da página da web, que pode ser menor que clientHeight.
scrollHeight
O IE e o Opera consideram scrollHeight a altura real do conteúdo da página da web, que pode ser menor que clientHeight.
NS e FF consideram scrollHeight a altura do conteúdo da página da web, mas o valor mínimo é clientHeight.
Simplificando
clientHeight é a altura da área onde o conteúdo é visualizado através do navegador.
NS e FF acreditam que offsetHeight e scrollHeight são alturas de conteúdo da web, mas quando a altura do conteúdo da web é menor ou igual a clientHeight, o valor de scrollHeight é clientHeight e offsetHeight pode ser menor que clientHeight.
O IE e o Opera consideram offsetHeight a área visível da barra de rolagem clientHeight mais a borda. scrollHeight é a altura real do conteúdo da página da web.
Mesmo motivo
As explicações de clientWidth, offsetWidth e scrollWidth são as mesmas acima, apenas substitua a altura pela largura.
ilustrar
O texto acima é baseado no DTD HTML 4.01 Transitional. Se for DTD XHTML 1.0 Transitional, o significado será diferente. Em XHTML, esses três valores têm o mesmo valor, indicando a altura real do conteúdo. A maioria das novas versões de navegadores oferece suporte à ativação de diferentes interpretadores com base no DOCTYPE especificado na página.
scrollTop é o valor da altura "rolada", exemplo:
Copie o código do código da seguinte forma:
<divid="p">
<div id="t">Se scrollTop estiver definido para p, esse conteúdo pode não ser totalmente exibido. </div>
</div>
<script type="texto/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
Como scrollTop está definido para o elemento externo p, o elemento interno rolará para cima e a parte enrolada será scrollTop.
scrollLeft é semelhante.
Já sabemos que offsetHeight é a largura do seu próprio elemento e scrollHeight é a largura absoluta do elemento interno, incluindo a parte oculta do elemento interno. Acima, scrollHeight de p é 300 e offsetHeight de p é 100.
scrollWidth é semelhante.
IE e FireFox suportam totalmente, enquanto Netscape 8 e Opera 7.6 não suportam scrollTop e scrollLeft (exceto document.body.scrollTop e document.body.scrollLeft).
1.clientHeight, clienteWidth:
Essas duas propriedades mostram aproximadamente a altura e a largura dos pixels do conteúdo do elemento. Teoricamente, essas medidas não levam em consideração nenhuma adição através da folha de estilo.
Margens, bordas, etc. em elementos.
2.clientLeft,clientTop:
Esses dois retornam a espessura da borda ao redor do elemento. Se você não especificar uma borda ou não posicionar o elemento, seu valor será 0.
3.rolar para a esquerda, rolar para cima:
Se o elemento for rolável, você poderá usar essas duas propriedades para saber até que ponto o elemento rolou nas direções horizontal e vertical. A unidade é pixels.
Para elementos que não são roláveis, esses valores são sempre 0.
4. scrollHeight, scrollWidth:
Não importa quantos objetos estejam visíveis na página, eles são o todo.
5.estilo.esquerda:
O deslocamento do elemento posicionado da borda esquerda do retângulo que o contém
6.style.pixelEsquerda:
Retorna o valor inteiro de pixel do deslocamento da borda esquerda do elemento posicionado Porque o valor não pixel do atributo retorna uma string contendo a unidade, por exemplo, 30px. Use este atributo para tratar valores em pixels separadamente.
7. estilo:posLetf:
Retorna o valor numérico do deslocamento da borda esquerda do elemento posicionado, independentemente das unidades especificadas pelo elemento da folha de estilo correspondente, pois o valor sem posição do atributo retorna uma string contendo a unidade, por exemplo, 1.2em.
Apenas algumas analogias como top, pixelTop, posTop serão suficientes.
ESQUERDA: é a posição deslocada da esquerda para a direita, ou seja, a distância entre o pingente e a borda esquerda da tela;
clientLeft retorna a distância entre o valor da propriedade offsetLeft do objeto e o valor real no lado esquerdo da janela atual.
offsetLeft retorna o valor esquerdo do objeto em relação ao layout ou às coordenadas do objeto pai. Ele toma o canto superior esquerdo do objeto pai como a origem das coordenadas, e a direita e para baixo são as coordenadas x na direção positiva de. os eixos X e Y.
pixelLeft define ou retorna a posição do objeto em relação ao lado esquerdo da janela
scrollWidth é a largura do conteúdo real do objeto, excluindo a largura da borda, e mudará com a quantidade de conteúdo no objeto (muito conteúdo pode alterar a largura real do objeto).
clientWidth é a largura visível do objeto, excluindo barras de rolagem e outras bordas, e mudará com o tamanho de exibição da janela.
offsetWidth é a largura visível do objeto, incluindo barras de rolagem e outras bordas, e mudará com o tamanho de exibição da janela.
IE6.0, FF1.06+:
clientWidth = largura + preenchimento
clientHeight = altura + preenchimento
offsetWidth = largura + preenchimento + borda
offsetHeight = altura + preenchimento + borda
IE5.0/5.5:
clienteLargura = largura - borda
clientHeight = altura-borda
offsetWidth = largura
offsetHeight = altura
(É preciso mencionar: o atributo margin em CSS não tem nada a ver com clientWidth, offsetWidth, clientHeight e offsetHeight)
offsetwidth: é a largura do deslocamento do elemento em relação ao elemento pai. Igual a borda+preenchimento+largura
clientwidth: é a largura visível do elemento. Igual ao preenchimento + largura
scrollwidth: é a largura do elemento incluindo a parte de rolagem.
offsetLeft: a posição do elemento Html em relação ao seu próprio elemento offsetParent
scrollLeft: Retorna e define o valor da coordenada da tarefa de rolagem horizontal atual
Copie o código do código da seguinte forma:
<input type="button" value="Click" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<linguagem script="javascript">
função mover()
{
var d=document.getElementById("d")
a=avaliação(20)
d.scrollLeft+=a
}
</script>
Salve como uma página da web, execute-a, clique no botão e a barra de rolagem se moverá
Clique na div, primeiro exiba a posição de b em relação a a e, em seguida, exiba a posição de a em relação à janela.