元素始终居中

最新推荐文章于 2022-09-22 13:40:16 发布

吴机智

最新推荐文章于 2022-09-22 13:40:16 发布

阅读量74

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108503156

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    button{
        position: fixed;
        top: 0;
        left: 0;
    }
    body{
        width: 2000px;
        height: 2000px;
    }
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: none;
    }

    span {
        position: absolute;
        right: 5px;
        top: 5px;
    }
</style>

<body>
    <button>显示</button>
    <div>
        <span>X</span>
    </div>
    <script>
        // 点击button, 让div在页面中居中显示
        var btn = document.getElementsByTagName('button')[0];
        var span = document.getElementsByTagName('span')[0];
        var div = document.getElementsByTagName('div')[0];
        console.log(btn, div, span);

        // 添加点击事件
        btn.onclick = function () {
            // div居中显示, top  left
            div.style.display = 'block';

            // 固定数据： 
            var oH = div.offsetHeight;
            var cH = document.documentElement.clientHeight;
            var sT = document.documentElement.scrollTop;
            console.log(oH, cH);

            var oW = div.offsetWidth;
            var cW = document.documentElement.clientWidth;
            var sL = document.documentElement.scrollLeft;

            div.style.top = (cH - oH) / 2 + sT + 'px';
            div.style.left = (cW - oW) / 2 + sL + 'px';
        }
        window.onscroll = function(){
            // 固定数据： 
            var oH = div.offsetHeight;
            var cH = document.documentElement.clientHeight;
            var sT = document.documentElement.scrollTop;
            console.log(oH, cH);

            var oW = div.offsetWidth;
            var cW = document.documentElement.clientWidth;
            var sL = document.documentElement.scrollLeft;

            div.style.top = (cH - oH) / 2 + sT + 'px';
            div.style.left = (cW - oW) / 2 + sL + 'px';
        }
    </script>
</body>

</html>