Question: How to get the distance of an element from the top of the document?
[javascript] view plain copy var rect=$('#elem')[0].getBoundingClientRect(); //获取元素距离文档顶部的距离 var top=rect.top+(window.pageYOffset||document.documentElement.scrollTop)-(document.documentElement.clientTop||0); var left=rect.left+(window.pageXOffset||document.documentElement.scrollLeft)-(document.documentElement.clientLeft||0);
The idea of this method comes from jQuery’s offset method
null and undefined both mean none, but null means that the attribute exists and the value does not exist, and undefined means that even this attribute does not exist
//例如document.parentNode//浏览器天生自带的一个属性:父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了,它没有父亲)document.parentnode//undefined (因为没有parentnode这个属性)
1, parentNode: father Node The upper-level element in the HTML structure hierarchy
var outer = document.getElementById('outer');var inner = document.getElementById('inner');var center = document.getElementById('center'); center.parentNode //inner
2. offsetParent: The parent reference object is in the same plane, and the outermost element is The parent references of all elements inside (not necessarily related to the HTML hierarchy)
Generally speaking, the parent references of all elements in a page are body
document.body.offsetParent // null
If you want to change the parent reference object, you need to change it through position positioning (absolute relative fixed can be changed) )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #outer{ width:180px; height:180px; margin:50px auto; border:10px solid #000; background:orange; padding:50px; } #inner{ width:80px; height:80px; padding:50px; border:10px solid #000; background:green; } #center{ width:50px; height:50px; border:10px solid #000; background:red; }</style> </head> <body> <div id="outer"> <div id="inner"> <div id="center"></div> </div> </div> <script>var outer = document.getElementById('outer');var inner = document.getElementById('inner');var center = document.getElementById('center'); outer.style.position = "relative";//这样inner和center的参照物都是outercenter.offsetParent//outerinner.offsetParent//outerouter.offsetParent//bodyouter.style.position = "relative";// inner.style.position = "relative"; center.offsetParent//innerinner.offsetParent//outerouter.offsetParent//body</script> </body> </html>
3. offsetTop/offsetLeft: The offset distance of the current element (outer border) from its parent reference object (inner border)
As shown in the figure below:
## The following is an offset method: equivalent to jQuery The offset method in can obtain the offset from the body (including left offset and upper offset) of any element on the page, regardless of who the parent reference of the current element is. One result obtained is an object {left: left offset from body, top: top offset from body}
In the standard IE8 browser, we use offsetLeft/ offsetTop actually takes into account the border of the parent reference object. So we don’t need to add a separate border ourselves
The code is as follows:
function offset(curEle){var totalLeft = null,totalTop = null,par = curEle.offsetParent;//首先加自己本身的左偏移和上偏移totalLeft+=curEle.offsetLeft; totalTop+=curEle.offsetTop//只要没有找到body,我们就把父级参照物的边框和偏移也进行累加while(par){if(navigator.userAgent.indexOf("MSIE 8.0")===-1){//累加父级参照物的边框totalLeft+=par.clientLeft; totalTop+=par.clientTop } //累加父级参照物本身的偏移totalLeft+=par.offsetLeft; totalTop+=par.offsetTop par = par.offsetParent; }return{ left:totalLeft, top:totalTop } } console.log(offset(center).left)
The above is the detailed content of Detailed explanation of obtaining the offset of an element offset instance. For more information, please follow other related articles on the PHP Chinese website!