Quando escrevemos os elementos da página, queremos chamá-lo no js entender o quanto seu tamanho, então devemos obtê-lo através de que métodos?
Aqui vou apresentar algumas das propriedades por meio de um exemplo, vamos chegar ao tamanho dos elementos na barra de página.
Começamos por HTML e CSS layout de uma caixa na página
css部分
<style>
#box{width: 100px;height: 100px;padding: 10px;border: 20px solid black;margin: 30px;position: absolute;left: 40px;top: 40px;overflow: auto}
</style>
html部分
<body>
<div id="box">获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值</div>
</body>
Isto é o que nós escrevemos nos elementos na página, vamos obter o tamanho de suas partes diferentes com propriedades diferentes
Nota: Os seguintes propriedades só pode ser obtida tamanho não pode ser conjunto
tamanho 1. visor: a janela de visão, sem fronteiras (clientWidth eo clientWidth)
console.log(obox.clientWidth); // cont+padding
console.log(obox.clientHeight); // cont+padding
Aqui temos o tamanho do conteúdo do elemento mais estofamento através clientWidth e clientHeight. É evidente que começam a estabelecer a largura e a altura são cada 100 p, preenchimento de um 10px, por isso, deve ser de 120 e 120. Mas porque nós passamos overflow: a caixa sobre o conteúdo exibido pela propriedade deslizante automático, por isso ocuparam a seção de conteúdo caixa de controle deslizante, então temos
então colocamos primeiro comentário fora overflow: auto, desta vez para obter que iria definir o 120 e 120;
o tamanho 2. visual: tamanho visível (offsetWidth eo offsetHeight)
console.log(obox.offsetWidth); // cont+padding+border
console.log(obox.offsetHeight); // cont+padding+border
Nós offsetWidth e offsetHeight é adquirido conteúdo mais estofamento plus size quadro
é 100px conteúdo mais estofamento mais dois 20px 10px fronteira dos dois
é 160px
3. elementos de compensação atuais: Controladora posicionando uma fase, de acordo com o deslocamento da mãe, o pai não está localizado, de acordo com a página (e o offsetTop o offsetLeft)
console.log(obox.offsetLeft); // margin+position
console.log(obox.offsetTop); // margin+position
offsetLeft offsetTop adquirida e o elemento de corrente é compensada margem mais o valor da posição i + 40 px = 70 pixels 30px
4. compreendendo distância deslocável (scrollWidth e o scrollHeight)
console.log(obox.scrollWidth); //包含溢出的文本的尺寸
console.log(obox.scrollHeight); //包含溢出的文本的尺寸
Isto é principalmente adquirida tamanho do conteúdo (incluindo preenchimento e conteúdo), mas à medida que entramos na caixa de um monte de conteúdo para ser escondida por uma barra de rolagem, mas o tamanho da propriedade que contém texto em excesso, de modo que temos é
A largura menos 98 representa a largura da barra de deslocamento de modo a que se torna 98 120;
e 912 é o conteúdo original da altura total do transbordo;
Finalmente, dar-lhe sobre uma maneira não só para obter a propriedade também pode ser definida
A distância de rolagem, ambas adquiridas, mas é fornecida (eo scrollLeft scrollTop)
// 滚动的距离，既能获取，又能设置
obox.onscroll = function(){
console.log(obox.scrollTop);
console.log(obox.scrollLeft);
}
obox.onclick = function(){
obox.scrollTop = 333;
}
Aqui temos a partir do evento de rolagem e rolagem do topo do get esquerda é
porque a largura da barra de rolagem para que o visor não é zero, mas como roda de rolagem I está constantemente a aumentar a altura do topo. Vamos ver se nós clique no conjunto de caixa é um retrocesso a partir do topo 333px lugar.
Ao clicar na caixa, a polia prestes a saltar a distância do topo 333 para exibir o conteúdo,
de modo que nós atingir um conjunto o tamanho da função.
