一张图带你了解 JavaScript DOM、事件的尺寸和位置
2020-02-02 本文已影响0人
wdapp
本文主要总结整理了事件参数、Window、Element中的位置和尺寸属性
一张图带你了解 JavaScript DOM、事件的尺寸和位置
DOM尺寸&位置.png
event
- event.screenY 鼠标指针相对于全局（屏幕）的Y坐标；
- event.clientY 鼠标指针在点击元素（DOM）中的Y坐标。
- event.pageY 鼠标指针相对于整个文档的Y坐标；
- event.y MouseEvent.clientY的别名。
- event.offsetY 鼠标指针相对于目标节点内边位置的Y坐标
- event.layerX 返回事件相对于当前图层的水平坐标。
window
- Window.pageYOffset 只读 window.scrollY的别名。
- Window.scrollY 只读 返回文档已经垂直滚动的像素数。
- Window.screenY and Window.screenTop 只读 这两个属性都返回从用户浏览器视口的顶部边框到屏幕顶部的垂直距离。
- Window.outerHeight 只读 返回浏览器窗口的外部高度。
- Window.innerHeight 只读 获得浏览器窗口的内容区域的高度，包含水平滚动条(如果有的话)。
- window.screen
- Screen.availHeight 指定屏幕的高度，以像素为单位，减去操作系统显示的永久或半永久用户界面功能，例如Windows上的“任务栏”。
- Screen.height 以像素为单位返回屏幕的高度。
- Screen.availTop 指定未分配给永久或半永久用户界面功能的第一个像素的y坐标。
box
- Element.clientHeight 只读 返回Number 表示内部相对于外层元素的高度。
- Element.clientTop 只读 返回 Number 表示该元素距离它上边界的高度。
- Element.scrollHeight 只读 返回类型为： Number，表示元素的滚动视图高度。
- Element.scrollTop 返回类型为：Number ，表示该元素纵向滚动条距离 返回类型为：Number ，表示该元素纵向滚动条可移动的最大值
- HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
- HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
示例完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一张图带你了解 JavaScript DOM、事件的尺寸和位置</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
border: 1px red solid;
position: absolute;
width: 100%;
height: 1500px;
box-sizing: border-box;
}
.container .info {
position: fixed;
z-index: 1;
}
.container .box {
width: 200px;
height: 200px;
border: 30px green solid;
padding: 20px;
margin: 20px;
position: absolute;
left: 100px;
top: 200px;
}
.container .box::after {
content: "";
display: inline-block;
position: absolute;
top: 150px;
left: 150px;
border: 5px red solid;
border-radius: 50%;
}
.container .box .pre {
height: 100%;
border: 1px pink solid;
box-sizing: border-box;
}
.container .wrap {
width: 200px;
height: 150px;
border: 20px blue solid;
padding: 10px;
margin: 20px;
position: absolute;
left: 100px;
top: 600px;
overflow: auto;
}
.container .wrap .pre {
height: 350px;
border: 1px pink solid;
box-sizing: border-box;
}
.group {
position: absolute;
top: 610px;
right: 100px;
}
</style>
</head>
<body>
<div class="container" id="container">
<pre class="info">
.container {
border: 1px red solid;
position: absolute;
width: 100%;
height: 1500px;
box-sizing: border-box;
}
</pre>
<div class="box" id="box">
<pre class="pre">
.container .box {
width: 200px;
height: 200px;
border: 30px green solid;
padding: 20px;
margin: 20px;
position: absolute;
left: 100px;
top: 200px;
}
</pre>
</div>
<div class="wrap" id="wrap">
<pre class="pre">
.container .wrap {
width: 200px;
height: 150px;
border: 20px blue solid;
padding: 10px;
margin: 20px;
position: absolute;
left: 100px;
top: 600px;
}
</pre>
</div>
</div>
<div class="group">
<pre class="pre">
.container .wrap {
width: 200px;
height: 150px;
border: 20px blue solid;
padding: 10px;
margin: 20px;
position: absolute;
left: 100px;
top: 600px;
}
</pre>
<pre class="pre">
.container .wrap .pre {
height: 350px;
border: 1px pink solid;
box-sizing: border-box;
}
</pre>
</div>
<script>
var container = document.getElementById("container");
var box = document.getElementById("box");
var wrap = document.getElementById("wrap");
box.addEventListener("click", function(e) {
console.log("box click event", e);
console.log("box click e.target", e.target);
console.log("box click e.screenY", e.screenY);
console.log("box click e.clientY", e.clientY);
console.log("box click e.pageY", e.pageY);
console.log("box click e.offsetY", e.offsetY);
console.log("box click e.layerY", e.layerY);
console.log("window.scrollY", window.scrollY);
console.log("window.screenY", window.screenY);
console.log("window.outerHeight", window.outerHeight);
console.log("window.innerHeight", window.innerHeight);
console.log("window.screen.availHeight", window.screen.availHeight);
console.log("window.screen.height", window.screen.height);
console.log("window.screen.availTop", window.screen.availTop);
console.log("box.clientHeight", box.clientHeight);
console.log("box.clientTop", box.clientTop);
console.log("box.scrollHeight", box.scrollHeight);
console.log("box.scrollTop", box.scrollTop);
console.log("box.offsetTop", box.offsetTop);
console.log("box.offsetHeight", box.offsetHeight);
});
window.addEventListener("scroll", function() {
//声明 <!DOCTYPE html>时使用
console.log("document.documentElement.scrollTop", document.documentElement.scrollHeight);
console.log("document.documentElement.scrollTop", document.documentElement.scrollTop);
//未声明 <!DOCTYPE html> 时使用
// console.log("document.body.scrollTop", document.body.scrollTop);
// console.log("document.body.scrollHeight", document.body.scrollHeight);
});
wrap.addEventListener("scroll", function() {
console.log("wrap.scrollHeight", wrap.scrollHeight);
console.log("wrap.scrollTop", wrap.scrollTop);
});
setTimeout(function(){
window.scrollTo(0, 119);
wrap.scrollTop = 100;
},1000)
</script>
</body>
</html>
