javascript获取窗口和div位置

最新推荐文章于 2024-08-17 04:10:42 发布

qianbo_insist

最新推荐文章于 2024-08-17 04:10:42 发布

阅读量2.9k

点赞数 1

分类专栏： html 文章标签： html 窗口位置

本文链接：https://blog.csdn.net/qianbo042311/article/details/119170549

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1 事件获取

事件的位置主要涉及clientX,clientY,screenX,screenY,offsetX,offsetY 。

1.1offsetX,offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标。

1.2event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

1.3 event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。标准事件和IE事件都定义了这2个属性。

2 获取页面元素绝对位置函数

2.1 浏览器左角离屏幕左角距离

window.screenTop window.screenLeft

<html>
<head>
    <style>
         #mydiv {
                        border: 2px solid black;
                        width: 640px;
                        height: 360px;
                }
        </style>
</head>
<body>
        <button onclick="get()">获取</button>
        <br/>
        <div id="mydiv"></div>
        <script>
                function get(){
                        alert(window.screenTop)
                        alert(window.screenLeft);
                        var div = document.getElementById('mydiv');
           var clientHeight = div.clientHeight;
        var clientWidth = div.clientWidth;
        div.innerHTML = '';
        div.innerHTML += 'clientHeight: ' + clientHeight + '<br/>';
        div.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';

        var clientLeft = div.clientLeft;
        var clientTop = div.clientTop;
        div.innerHTML += 'clientLeft: ' + clientLeft + '<br/>';
        div.innerHTML += 'clientTop: ' + clientTop + '<br/>';

        var offsetHeight = div.offsetHeight;
        var offsetWidth = div.offsetWidth;
        div.innerHTML += 'offsetHeight: ' + offsetHeight + '<br/>';
        div.innerHTML += 'offsetWidth: ' + offsetWidth + '<br/>';

        var offsetLeft = div.offsetLeft;
        var offsetTop = div.offsetTop;
        div.innerHTML += 'offsetLeft: ' + offsetLeft + '<br/>';
        div.innerHTML += 'offsetTop: ' + offsetTop + '<br/>';

        var offsetParent = div.offsetParent;
        div.innerHTML += 'offsetParent: ' + offsetParent.id + '<br/>';
                }
        </script>
</body>

</html>