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

最新推荐文章于 2022-08-12 17:58:40 发布

CopperDong

最新推荐文章于 2022-08-12 17:58:40 发布

阅读量6.9k

点赞数 1

分类专栏：前端

原文链接：https://segmentfault.com/a/1190000014293962

版权

前端专栏收录该内容

71 篇文章 1 订阅

订阅专栏

前言

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

解决办法

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

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

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

下面是我写的一个demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box {
        width: 500px;
        height: 500px;
        background: #0a67fb;
        margin: 100px auto;
        position: relative;
    }

    #inner-box {
        width: 200px;
        height: 200px;
        background: #00F7DE;
        position: absolute;
        top: 50px;
        left: 320px;
        visibility: hidden;
    }
</style>
<body>
<div id="box">
    <div id="inner-box">
    </div>
</div>
<script>
    var box = document.querySelector('#box');
    var innerbox = document.querySelector('#inner-box');

    box.onmouseenter = function (e) {
        var wrapperBoxWidth = box.offsetWidth;// 获取父容器宽度
        var wrapperBoxHeight = box.offsetHeight;// 获取父容器高度

        var innerBoxWidth = innerbox.offsetWidth;// 获取弹框宽度
        var innerBoxHeight = innerbox.offsetHeight;// 获取弹框高度
        var innerBoxLeft = innerbox.offsetLeft;// 获取弹框距离左侧宽度
        var innerBoxTop = innerbox.offsetTop;// 获取弹框距离顶部高度

        innerbox.style.visibility = 'visible'  // 鼠标移入时显示弹框
        
        // 如果弹框宽度+距离左侧宽度大于外部元素的宽度，则右侧溢出
        if (innerBoxLeft + innerBoxWidth > wrapperBoxWidth) {
            innerbox.style.left = 'auto'
            innerbox.style.right = '10px'
        }

        // 如果弹框高度+距离顶部高度大于外部元素的高度，则底部溢出
        if (innerBoxTop + innerBoxHeight > wrapperBoxHeight) {
            innerbox.style.top = 'auto'
            innerbox.style.bottom = '10px'
        }
    }
    box.onmouseleave = function () {
        innerbox.style.visibility = 'hidden' // 鼠标移开时隐藏弹框
    }
</script>
</body>
</html>

CopperDong

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHeight

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

扫一扫