JS-25-offset、scroll、client的相关属性

offset 系列

offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

在这里插入图片描述

下面分别介绍。

1、offsetWidth 和 offsetHight

offsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：

offsetWidth = width + padding + border
offsetHeight = Height + padding + border

这两个属性，他们绑定在了所有的节点元素上。获取元素之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            border: 20px solid #54bbf6;
            padding: 30px;
            margin: 100px;
            color: #000;
        }
    </style>
</head>
<body>
    <div class="d1">hello world</div>
    <script>
        var d1 = document.querySelector(".d1")
        console.log([d1]);
        console.log(d1.offsetWidth);
        console.log(d1.offsetHeight);
    </script>
</body>
</html>

在这里插入图片描述

2、offsetParent

offsetParent：获取当前元素的定位父元素。

如果当前元素的父元素，有CSS定位（position为absolute、relative、fixed），那么 offsetParent 获取的是最近的那个父元素。

如果当前元素的父元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent 获取的是body。

3、offsetLeft 和 offsetTop

offsetLeft：当前元素相对于其定位父元素的水平偏移量。

offsetTop：当前元素相对于其定位父元素的垂直偏移量。

父元素内边距开始计算（如果body作为父元素就从边框开始计算）+ 元素外边距。
如果父级没有定位，则以浏览器为准计算

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            padding: 100px;
            margin: 100px;
            position: relative;
            border: 20px solid #000;
            background-color: pink;
        }

        .box2 {
            width: 100px;
            height: 100px;
            margin: 100px;
            border: 1px solid #000;
            background-color: red;
            /*position: absolute;*/
            /*left: 10px;*/
            /*top: 10px;*/
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2" style="left: 10px"></div>
    </div>

    <script>
        var box2 = document.querySelector(".box2");

        //offsetTop和offsetLeft
        console.log(box2.offsetLeft); //200
        console.log(box2.style.left); //10px
    </script>

</body>

</html>

在这里插入图片描述

offset 与 style 区别

在这里插入图片描述

scroll系列

当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

在这里插入图片描述

1、ScrollWidth 和 scrollHeight

ScrollWidth 和 scrollHeight：获取元素自身的宽、高。包括 width 和 padding，不包括 border和margin。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 3px;
            border: 8px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
    </div>
    <script>
        var box = document.querySelector(".box")

        console.log(box.scrollWidth);//打印结果120
        console.log(box.scrollHeight);//打印结果406
    </script>
</body>

</html>

在这里插入图片描述

2、scrollTop 和 scrollLeft

scrollLeft：获取被卷去的左侧距离。

scrollTop：获取被卷去的上侧距离。

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

实战经验：

当某个元素满足scrollHeight - scrollTop == clientHeight时，说明垂直滚动条滚动到底了。

当某个元素满足scrollWidth - scrollLeft == clientWidth时，说明水平滚动条滚动到底了。

这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“长长的活动规则”，才允许触发接下来的表单操作。

页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

声明了 DTD，使用 document.documentElement.scrollTop，IE6、7、8才能认出来。
未声明 DTD，使用 document.body.scrollTop，chrome浏览器才能认出来
新方法 window.pageYOffset和 window.pageXOffset，火狐/谷歌/ie9+ 支持（移动端直接用这种方法就可以）

	function getScroll() {
	    return {
	      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
	      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
	    };
	 } 
	使用的时候  getScroll().left

获取 html 文档的方法

获取title、body、head、html标签的方法如下：

document.title 文档标题；

document.head 文档的头标签

document.body 文档的body标签；

document.documentElement （这个很重要）。

document.documentElement表示文档的html标签。也就是说，基本结构当中的 html 标签而是通过document.documentElement访问的，并不是通过 document.html 去访问的。

3.scrollTo / scrollBy

scrollTo(x,y) 使页面滚动到指定位置
scrollBy(x,y) 使页面滚动到相对当前位置的指定距离的位置,

client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列
的相关属性可以动态的得到该元素的边框大小、元素大小等。

在这里插入图片描述

1.clientWidth 和 clientHeight

元素调用时：

clientWidth：获取元素的可见宽度（width + padding）。

clientHeight：获取元素的可见高度（height + padding）。

body/html 调用时：

clientWidth：获取网页可视区域宽度。

clientHeight：获取网页可视区域高度。

声明：

clientWidth 和 clientHeight 属性是只读的，不可修改。

clientWidth 和 clientHeight 的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。

2.clientX 和 clientY

event调用：

clientX：鼠标距离可视区域左侧距离。

clientY：鼠标距离可视区域上侧距离。

3.clientTop 和 clientLeft

clientTop：盒子的上border。

clientLeft：盒子的左border。

三大系列总结对比

在这里插入图片描述
他们主要用法：

offset系列经常用于获得元素位置 offsetLeft offsetTop
client 经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得