JS para obter o código de implementação do elemento em relação à posição da janela

JS recebe o OffsetTop, Offsetleft e outras propriedades do elemento

obj.clientwidth // obtenha a largura do elemento

obj.clientHeight // A altura do elemento

obj.offsetleft // o elemento em relação à esquerda do elemento pai

obj.offsettop // o topo do elemento em relação ao elemento pai

obj.offsetWidth // a largura do elemento

obj.offsethEight // A altura do elemento

a diferença:

ClientWidth = Width + Padding

ClientHeight = altura + preenchimento

OffsetWidth = Width + Padding + Border

OffsetHeight = Largura + Padding + Border

O deslocamento tem mais largura de borda do que o cliente

 // Obtenha a coordenada horizontal do elemento (em relação à janela) função gettop (e) {var offset = e.offsetTop; if (e.offsetParent! = NULL) deslocamento+= gettop (e.offsetParent); Retornar deslocamento;} // Obtenha a coordenada horizontal do elemento (em relação à janela) Função GetLeft (e) {var offset = E.OffSetLeft; if (e.OffSetParent! = NULL) deslocamento+= getLeft (e.OffSetParent); retornar deslocamento;}

Também escrevi um artigo do JS sobre como obter locais de elementos: o JS obtém o OffsetTop, Offsetleft do elemento e outros atributos. Podemos obter a posição do elemento em relação à janela através dos atributos OffsetTop e OffsetLeft, mas os atributos Offsettop e OffsetLeft estão posicionados em relação ao elemento pai, e os elementos que geralmente precisam obter o cargo não são na camada mais externa, portanto, atribuídos relacionados ao deslocamento que travessem o elemento superior indispensável. Então a eficiência se torna um problema.

 // Obtenha a coordenada horizontal do elemento (em relação à janela) função gettop (e) {var offset = e.offsetTop; if (e.offsetParent! = NULL) deslocamento+= gettop (e.offsetParent); retornar o deslocamento;} // obtiver o coordenado horizontal} (relatório); deslocamento = e.offsetLeft; if (e.offsetParent! = NULL) deslocamento+= getLeft (e.offsetParent); retorno deslocamento;}

Felizmente, o navegador me forneceu a interface correspondente GetBoundingClientRect. Este método apareceu pela primeira vez no navegador do IE. Os navegadores posteriores também apoiaram esse método, e foi mais perfeito. No IE, eles só podem obter os atributos esquerda, superior, inferior e direita dos elementos, e os navegadores modernos posteriores também podem obter a largura e a largura dos elementos.

Deve -se notar aqui que o fundo está a distância entre a parte inferior do elemento e a parte superior da janela, em vez da parte inferior da posição no CSS em relação à parte inferior da janela. Da mesma forma, o atributo RIHGT é a distância entre o elemento mais à direita e o lado esquerdo da janela.

 var box = document.getElementById ("box"); var pos = box.getBoundingClientRect (); box.innerhtml = "top:"+pos.top+"esquerda:"+pos.left+"inferior:"+pos.bottom+"direita:"+post.right+"width:"+pos.width+"+".

Artigos originais, por favor, indique a reimpressão: reimpressa do desenvolvimento do front-end