offset,client,scroll三大家族

1.1 🤍offset

offset 用于获取元素自身的位置和大小
实例：
<style>
.farther{
  width: 200px;
  height: 200px;
  border: 1px solid greenyellow;
  position: relative;
}
.son{
  height: 100px;
  width: 100px;
  border : 1px solid rebeccapurple;
}
</style>

<div class="farther">
  <div class="son"></div>
</div>
<div class="w"></div>
<script>
  var farther = document.querySelector(".farther");
  var son = document.querySelector(".son");
  var w = document.querySelector("w");
  console.log(farther.offsetTop);//距离上方有定位父元素的的高
  console.log(farther.offsetLeft);
  console.log(farther.offsetWidth);//202 width=padding+border+width

  console.log(son.offsetTop);//0;father有定位，son距离father的距离为0;
  console.log(son.offsetParent);//返回带有定位的父亲，
  //一定要有定位，没有定位的话，会一层一层的向上查找。
</script>

1.2 offset和style的区别

实例：
<style>
.box{
  width: 200px;
  height: 200px;
  padding: 10px;
  background: silver;
}
</style>


<div class="box"></div>
<script>
var box = document.querySelector(".box");
console.log(box.offsetWidth);//220 获取的是一个数字
console.log(box.style.width);//返回的是一个字符串  返回的是一个空的，
//因为没有在代码里定义style的宽度，只在css中定义了
box.style.width="300px";
// offsetWidth是不能赋值的，只能从中获取值
// style可以定义

1.3 计算鼠标在盒子中的位置

<style>
.box{
width: 400px;
height: 400px;
background: skyblue;
margin: 20px;
}
</style>

实例：

<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mousemove",function(e){
  // 2.mouseover：当鼠标经过被选元素和被选元素的子元素时都会触发mouseover事件，对应mouseout事件。
  // 3.mousemove：当鼠标移入被选元素内后，任意移动一个像素点都会触发。

  // 1.mouseleave: 当鼠标移除被选元素才会触发，后代元素不会触发，该方法不会冒泡。
  // 2.mouseout: 无论鼠标离开被选元素还是被选元素的子元素都会触发。
  var allx = e.pageX;
  var ally = e.pageY;
  var x = allx - this.offsetLeft;
  var y = ally - this.offsetTop;
  this.innerHTML=" x轴坐标为:  "+"  "+x+" y轴坐标为: "+y;
  })
 </script>
 

1.4 offset案例(拖拽一个东西)

<style>
 div{
  width: 200px;
  height: 200px;
  background: royalblue;
  position: relative;
 }
 
</style>
 <div class="box"></div>
<script>
// 不能用图片，因为图片在浏览器中默认有拖拽的功能
var img1 = document.querySelector(".box");

 img1.addEventListener("mousedown",function(e){
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;

  function move(e){
    img1.style.left=e.pageX-x+"px";
    img1.style.top=e.pageY-y+"px";
  }
  document.addEventListener("mousemove",move);
  document.addEventListener("mouseup",function(){
    document.removeEventListener("mousemove",move)
  })
 })

2 client家族

实例：
<style>
.son{
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid royalblue;
}
</style>

<div class="father">
  <div class="son"></div>
</div>
<script>
  var son = document.querySelector(".son");
  console.log(son.clientHeight);//240px 不带边框的一个高度
  console.log(son.clientWidth);//240px 不带边框的一个宽度
  console.log(son.clientLeft);//10 代表左边框的一个宽度
  console.log(son.clientTop);//10 代表上边框的一个宽度
</script>

3 🤍scroll家族

<style>
div{
  width: 300px;
  height: 300px;
  overflow: auto;
  border: 1px solid grey;
}
</style>

<div>
新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。
频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,
感知世界。品牌栏目有《看见》
新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。
频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,
感知世界。品牌栏目有《看见》
新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。
频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,
感知世界。品牌栏目有《看见》
新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。
频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,
感知世界。品牌栏目有《看见》
新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。
频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,
感知世界。品牌栏目有《看见》
新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。
频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,
感知世界。品牌栏目有《看见》
新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。
频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,
感知世界。品牌栏目有《看见》
</div>
<script>
var div = document.querySelector("div");
console.log(div.scrollHeight);//滚动高度("即：里面的内容高度")
div.addEventListener("scroll",function(){
  console.log(div.scrollTop);//卷到里面的高度
})
</script>