javascript获取窗口和div位置
Posted qianbo_insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript获取窗口和div位置相关的知识，希望对你有一定的参考价值。
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>
2.2 结果
以上是关于javascript获取窗口和div位置的主要内容，如果未能解决你的问题，请参考以下文章