目录
零、码仙励志
成功不是让周围的人都羡慕你，称赞你，而是让周围的人都需要你，离不开你
一、offset系列
1.offsetWidth和offsetHeight
offsetWidth = width+padding+border;
offsetWidth（元素实际宽）与自身的border、padding、widtht有关，与父元素无关（就是边框到边框的距离）
offsetHeight = height+padding+border;
offsetHeight （元素实际高）与自身的border、padding、height有关，与父元素无关（就是边框到边框的距离）
offsetHeight 代码请参考 offsetWidth
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
border: 10px solid pink;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div id="dv"></div>
<script>
//结果是160,因为有俩个border和padding
//100+2*10+2*20=160
console.log(document.getElementById("dv").offsetWidth);
</script>
</body>2.offsetTop和offsetLeft
1.父元素没有脱离文档流
offsetTop 对齐浏览器，自身最边缘（边框）到客户区最上端的距离
offsetTop = 元素到浏览器的高度
offsetLeft 对齐浏览器，自身最边缘（边框）到客户区最左端的距离
offsetLeft = 元素到浏览器最左端的距离
offsetLeft 代码请参考 offsetTop
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#dv1 {
width: 300px;
height: 200px;
border: 10px solid pink;
padding: 20px;
margin: 30px;
}
#dv2 {
width: 100px;
height: 50px;
border: 10px solid pink;
padding: 20px;
margin: 30px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2"></div>
</div>
<script>
//结果是90
console.log(document.getElementById("dv2").offsetTop);
</script>
</body>
2.父元素脱离文档流（position:absolute;）
offsetTop 对齐父元素，自身最边缘（边框）到父级最上端的距离
offsetTop = 元素到父级的高度
offsetLeft 对齐父元素，自身最边缘（边框）到父级最左端的距离
offsetLeft = 元素到父级最左端的距离
offsetLeft 代码请参考 offsetTop
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#dv1 {
width: 300px;
height: 200px;
border: 10px solid pink;
padding: 20px;
margin: 30px;
position: absolute;
}
#dv2 {
width: 100px;
height: 50px;
border: 10px solid pink;
padding: 20px;
margin: 30px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2"></div>
</div>
<script>
//结果是50
console.log(document.getElementById("dv2").offsetTop);
</script>
3.offsetParent
返回该对象的父级
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative，fixed）,offsetParent为body。
如果当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素
1.当前元素的父级元素没有进行CSS定位
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="dv1">
<div id="dv2"></div>
</div>
<script>
console.log(document.getElementById("dv2").offsetParent);
</script>
</body>
2.当前元素的父级元素中有CSS定位
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv1{
position: absolute;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2"></div>
</div>
<script>
console.log(document.getElementById("dv2").offsetParent);
</script>
</body>
二、scroll系列
1.clientWidth和clientHeight
获取网页可视区域宽高
调用者不同，意义不同：
- 盒子调用：用来检测盒子的宽高+padding;
clientWidth = width+padding;不包含border和margin,而且不会被内容左右
- body/htm调用：可视区域大小；
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#dv1 {
width: 100px;
height: 50px;
margin: 20px;
padding: 10px;
border: 2px solid pink;
background-color: aqua;
}
</style>
</head>
<body>
<div id="dv1"></div>
<script>
//100+10*2=120
console.log(document.getElementById("dv1").clientWidth);
//50+10*2=70
console.log(document.getElementById("dv1").clientHeight);
console.log(document.body.clientWidth);
//50+10*2+2*2=74
console.log(document.body.clientHeight);
</script>
</body>2、clientTop和clientLeft (不常用)
clientTop:检测盒子的上border
clientLeft:检测盒子的左border
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#dv1 {
width: 100px;
height: 50px;
margin: 20px;
padding: 10px;
border: 2px solid pink;
background-color: aqua;
}
</style>
</head>
<body>
<div id="dv1"></div>
<script>
//2
console.log(document.getElementById("dv1").clientTop);
//2
console.log(document.getElementById("dv1").clientLeft);
</script>
</body>3、clientX和clientY
调用者为 window.event 或者 事件参数对象e，检测鼠标距离可视区域的宽高
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#dv1 {
width: 50px;
height: 50px;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<div id="dv1"></div>
<script>
//鼠标在页面中移动,div跟着鼠标移动
document.onmousemove = function (e) {
//鼠标的移动的横纵坐标
//可视区域的横坐标
document.getElementById("dv1").style.left = e.clientX + "px";
//可视区域的纵坐标
document.getElementById("dv1").style.top = e.clientY + "px";
};
</script>
</body>三、scroll系列
1、scrollWidth和scrollHeight
检测盒子的宽高
scrollHeight = height + padding; //不包括border和margin;
如果 盒子里面元素的宽度或者高度 大于 盒子的宽度或者高度，scrollWidth和scrollHeight就是盒子里面元素的宽度或者高度
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#dv1 {
width: 100px;
height: 50px;
margin: 20px;
padding: 10px;
border: 2px solid pink;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<div id="dv1"></div>
<script>
//100+10*2=120
console.log(document.getElementById("dv1").scrollWidth);
//50+10*2=70
console.log(document.getElementById("dv1").scrollHeight);
</script>盒子里面元素的高度大于盒子的高度
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#dv1 {
width: 100px;
height: 50px;
margin: 20px;
padding: 10px;
border: 2px solid pink;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<div id="dv1">码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙</div>
<script>
console.log(document.getElementById("dv1").scrollWidth);
console.log(document.getElementById("dv1").scrollHeight);
</script>
</body>
2、scrollTop和scrollLeft
被卷去的头部和左侧（浏览器无法显示的头部和左部）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
height: 2000px;
}
#dv1 {
width: 50px;
height: 50px;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<div id="dv1"></div>
<script>
//鼠标在页面中移动,div跟着鼠标移动
document.onmousemove = function (e) {
//有的浏览器把高度设计在了文档的第一个元素中了
//有的浏览器把高度设计在了body中了
//document.documentElement.scrollTop;//文档的第一个元素
//document.body.scrollTop;
//卷去的横纵坐标
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//卷去的纵坐标
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可视区域的横坐标+卷去的横坐标
document.getElementById("dv1").style.left = e.clientX + scrollLeft + "px";
//可视区域的纵坐标+卷去的纵坐标
document.getElementById("dv1").style.top = e.clientY + scrollTop + "px";
};
</script>
</body>