1.offset 偏移量
- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值是没有单位的
- offsetWidth 包含padding+border+width，属性是只读属性，只能获取不能赋值
- offsetLeft 返回相对于父元素左边框的距离,动态的。
- offsetTop 返回相对于父元素的上方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 100px 0 0 100px;
border: 10px solid pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
console.log('box.offsetTop:'+box.offsetTop)// 返回的结果是100 盒子距其父元素上方（当前是浏览器）的距离为100
console.log('box.offsetLeft:'+box.offsetLeft);// 返回的结果是100 盒子距其父元素左侧（当前是浏览器）的距离为100
console.log('box.offsetWidth:'+box.offsetWidth);//返回的结果是240 得到的这个宽度是包含边框和内边距的
</script>
</body>
</html>
2 .offset 与 style 区别
- offsetWidth 数值是没有单位的
- offsetWidth 包含padding+border+width
- offsetWidth 只读属性，只能获取不能赋值
- style.width 获得的是带有单位的字符串，只获取行内样式。
- style.width 获得不包含padding和border 的值
- style.width 是可读写属性，可以获取也可以赋值
总结：获取元素位置用offset ,修改元素属性值用style
3.client概述
通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
clientTop ：元素上边框大小
clientLeft ：元素左边框大小
clientWidth：包括padding，不包括边框。
clientHeight：包括padding，不包括边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 100px 0 0 100px;
border: 10px solid pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
console.log('box.clientTop:'+box.clientTop)// 返回的结果是10 盒子上边框的大小
console.log('box.clientLeft:'+box.clientLeft);// 返回的结果是10 盒子左边框的大小
console.log('box.clientWidth:'+box.clientWidth);//返回的结果是220 得到的这个宽度是包含内边距，但不包含边框
</script>
</body>
</html>
4. scroll 概述
我们使用 scroll 的相关属性可以动态的得到该元素的大小、滚动距离等。
scrollTop：被滚动的上侧距离，返回数值，不带单位；
scrollLeft：被滚动的左侧距离，返回数值，不带单位；
scrollWidth：返回元素实际宽度，包括滚动的距离，不含边框，返回数值不带单位。
scrollHeight：返回元素实际高度，包括滚动的距离，不含边框，不带单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
div{
width: 300px;
height: 300px;
overflow-y: scroll;
padding: 10px;
border: 10px solid yellowgreen;
margin-left: 50px;
}
</style>
</style>
</head>
<body>
<div class="box">
<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
</div>
<script>
var box = document.querySelector('.box');
console.log('box.scrollHeight:'+box.scrollHeight)// 返回的是元素实际高度，包括滚动的距离
// 我们给box添加一个滚动事件
box.addEventListener('scroll',function(){
console.log('box.scrollTop:'+box.scrollTop);//只要我们拖动滚动条，控制台就会打印被滚动的上侧距离
});
</script>
</body>
</html>
总结
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXOffset 获得
