Detailed explanation of obtaining the offset of an element offset instance-JS Tutorial-php.cn

Detailed explanation of obtaining the offset of an element offset instance

零下一度

Release： 2017-07-18 17:38:55

Original

2167 people have browsed it

Question: How to get the distance of an element from the top of the document?

[javascript] view plain copy
     var rect=$(&#39;#elem&#39;)[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);

Copy after login

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这个属性)

Copy after login

1, parentNode: father Node The upper-level element in the HTML structure hierarchy

var outer = document.getElementById(&#39;outer&#39;);var inner = document.getElementById(&#39;inner&#39;);var center = document.getElementById(&#39;center&#39;);

        center.parentNode //inner

Copy after login

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(&#39;outer&#39;);var inner = document.getElementById(&#39;inner&#39;);var center = document.getElementById(&#39;center&#39;);

        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>

Copy after login

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)

Copy after login

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!