理一理常用的元素位置属性和鼠标事件属性
基本样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background: cornflowerblue;
padding:20px;
border: solid 30px #555;
margin: 40px;
position: absolute;
left:50px;
top:50px;
overflow: auto;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
</div>
</body>
JavaScript部分
一、元素位置属性
1、元素内容的宽高，返回结果会带“px”，其他属性返回的都不带单位；
2、只有scrollTop/scrollLeft属性，既可以获取也可以设置，其他属性只能获取不能设置。
↓↓↓
<script>
var obox = document.querySelector(".box");
//元素的位置属性
// cont:元素内容的宽高
console.log(getComputedStyle(obox,false).width); //183px
console.log(getComputedStyle(obox,false).height); //200px
// cont+padding+border:元素实际宽度/高度
console.log(obox.offsetWidth); //300
console.log(obox.offsetHeight); //300
// cont+padding:元素视窗宽度/高度
console.log(obox.clientWidth); //223
console.log(obox.clientHeight); //240
// 总尺寸(包含溢出的内容尺寸)
console.log(obox.scrollWidth); //223
console.log(obox.scrollHeight); //500
// margin+position:相对于包含块偏移的位置
console.log(obox.offsetLeft); //90
console.log(obox.offsetTop); //90
// 滚动条最顶端和窗口中可见内容的最顶端之间的距离
console.log(obox.scrollTop);
console.log(obox.scrollLeft);
二、鼠标事件的常用属性
obox.onmousedown = function(eve){
var e = eve || window.event;
// 事件发生时，鼠标相对于事件源的坐标
console.log(e.offsetX,e.offsetY); //9 86
// 事件发生时，鼠标相对于浏览器可视区域的坐标
console.log(e.clientX,e.clientY); //129 206
// 事件发生时，鼠标相对于页面的坐标（包括滚出的距离）
console.log(e.pageX,e.pageY); //129 206
// 事件发生时，鼠标相对于显示器的坐标
console.log(e.screenX,e.screenY); //129 309
// 获取当前事件类型
console.log(e.type); //onmousedown
// 获取事件源（事件目标）
console.log(e.target); //div
}
</script>
</html>
如下图，鼠标点击红点处打印的数据↓↓↓
clipboard.png
