JS定位浏览器窗口

Eve_panda

于 2019-02-11 09:20:56 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： JS定位浏览器窗口

本文链接：https://blog.youkuaiyun.com/Eve_panda/article/details/86975983

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

菜鸟新手，初入前端，初来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>

在这里插入图片描述