js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHeight

前言

相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中hover效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可，但是，当鼠标移动到边界的菜单上时，弹框可能会超出外部元素的范围，如下图：

解决办法

动态的计算弹框距离外部元素的位置，即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果弹框的宽度（offsetWidth）+距离左边的距离（offsetLeft）大于父元素的宽度，则判断为超出外部元素范围，需要动态改变弹框距离边框的位置

下面是对offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop图解

注意，这里对弹框的布局有限制，虽然弹框要隐藏，但是不能使用display:none的方式隐藏，可以使用opacity:0或者visibility: hidden隐藏元素，因为display:none方式不能获取到元素的高度，宽度等

下面是我写的一个demo

以上代码亲测可以解决弹框溢出问题，如果道友有更好的解决办法，欢迎指出，不胜感激！！！