offset & offsetParent

by yakun chen

HTML

<div class="container">
  <span id="short">Short span. </span>
  <span id="long">Long span that wraps withing this div.</span>
</div>

<div id="box">
  this is in box
</div>

CSS

.container {
  width: 300px;
  border-color:blue;
  border-style:solid; 
  border-width:3px;
  left: 15px;
  position: relative;
  margin-left: 3px;
  padding-left: 2px;
}
#short {
    margin-left: 5px;
    /* padding-left: 3px; */
    border: 2px solid green;
    position: relative;
    left: 2px;
}
#long {
    margin-left: 20px;
}
#box {
  position: absolute; 
  border-color: red;
  border-width: 1px; 
  border-style: solid; 
  z-index: 10
}

JavaScript

var box = document.getElementById("box")
var short = document.getElementById("short")
var long = document.getElementById("long")


var offset = function (el) {
  var _x = 0;
  var _y = 0;


	// 这里使用 getBoundingClientRect() 也可以啊 ？？？
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0)
    _y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0 )
    el = el.offsetParent
  }

  return {
    top: _y,
    left: _x
  }
}

var meta = {
	/**
  *  margin + left + border, 起点是 padding 的左上角
  */
	short_offsetLeft: short.offsetLeft
  ,short_offsetParent: short.offsetParent
	,short_offset: offset(short)
}
  
console.log(meta)