JS Learning Summary----Get the offset of an element

Preface: Has been to read someone else's writing, and then learn something, now also put their own study record down, give everyone a chance to learn, welcome a lot of comments and recommendations Kazakhstan, common progress. There are still six people pay attention to me, haha happy. I'm going to go on with the writing.

Both null and undefined represent none, but null is a property existence value does not exist, undefined is not even this property exists

// For example        Document.parentnode// browser comes naturally with a property: The attribute of the Father node is null (because the document in one page is already the top-level element, it has no father)        Document.parentnode//undefined (because there is no parentnode this attribute)

1, ParentNode: Father node HTML structure of the upper level of the element in the hierarchy relationship

var outer = document.getElementById (' outer ');         var inner = document.getElementById (' inner ');         var center = document.getElementById (' center ');         // Inner

2, OffsetParent: Parent reference in the same plane, the outermost element is the parent reference of all the elements inside (and the HTML hierarchy is not necessarily linked)

In general, the parent reference for all elements in a page is body

Document.body.offsetParent//NULL

Changing the parent reference needs to be changed by position positioning (absolute relative fixed can be changed)

<!     DOCTYPE html>{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>varouter = document.getElementById (' outer ')); varInner = document.getElementById (' inner ')); varCenter = document.getElementById (' Center '); Outer.style.position= "relative";//so the inner and the center of the reference are outerCenter.offsetparent//outerInner.offsetparent//outerOuter.offsetparent//BodyOuter.style.position = "relative";//Inner.style.position = "relative"; Center.offsetparent//InnerInner.offsetparent//outerOuter.offsetparent//Body</script></body>
3. Offsettop/offsetleft: The offset distance of the current element (outer box) from its parent reference (inner border)
As shown in the following examples:
　　Here is an offset method: equivalent to the offset method in jquery, the implementation gets any element of the page, the offset from the body (including the left offset and the top offset), regardless of the current element's parent reference. One result obtained is an object {left: Offset from body, top: offset from body}
In the standard IE8 browser, we use Offsetleft/offsettop to actually include the border of the parent reference. So we don't have to put a frame on our own.
The code is as follows:　　
functionoffset (curele) {varTotalleft =NULL, Totaltop =NULL, par =curele.offsetparent; //first add itself to the left offset and the upper offsettotalleft+=Curele.offsetleft; Totaltop+=Curele.offsettop//as long as the body is not found, we add the border and offset of the parent reference.             while(PAR) {if(Navigator.userAgent.indexOf ("MSIE 8.0") ===-1){                    //Add a border to a parent referencetotalleft+=Par.clientleft; Totaltop+=Par.clienttop}//increment the offset of the parent referential itselftotalleft+=Par.offsetleft; Totaltop+=par.offsettop par=par.offsetparent; }            return{left:totalleft, top:totaltop}} console.log (offset (center). L EFT)
JS Learning Summary----Get the offset of an element