1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > javascript获取窗口和div位置

javascript获取窗口和div位置

时间:2023-07-31 12:50:58

相关推荐

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 结果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。