JS定位浏览器窗口

最新推荐文章于 2025-10-17 04:10:59 发布

原创最新推荐文章于 2025-10-17 04:10:59 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS定位浏览器窗口

本文介绍了一段使用JavaScript实现元素在浏览器窗口中居中显示的代码。通过获取浏览器窗口的高度和宽度，计算元素相对于窗口的位置，使元素无论在何种分辨率下都能保持居中。此外，还包含了对页面滚动时元素位置调整的处理。

菜鸟新手，初入前端，初来csdn，请各位大神多多指教。
这是关于JS定位浏览器窗口的代码。
代码中结构样式和JS写在一起。
图片版和文字版如下：

Document

<style type="text/css">
    #div{ width:100px; height:100px; background: red; position: absolute; }
</style>
<script type="text/javascript">
    //用JS定位一个据浏览器窗口左右上下都居中
    window.onload = function(){
        var oDiv = document.getElementById("div");
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var offsetX = (clientWidth - oDiv.offsetWidth) / 2;
        var offsetY = (clientHeight - oDiv.offsetHeight) / 2;
        oDiv.style.left = offsetX + "px";
        oDiv.style.top = offsetY + "px";
        document.onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            oDiv.style.top = offsetY + scrollTop + "px";
        }
    }
</script>

在这里插入图片描述