JavaScript-元素的位置系列

元素偏移量offset系列
元素可视区client系列
元素滚动scroll系列

首先是offset：offset系列如下图所示

它是指偏移量，在文档中占用所有显示的宽度，包括边框内边距内容、滚动条，但是不包括overflow的部分

offsetParent ：返回该元素的祖先元素中、离自己最近的、有定位的元素即返回该元素的最近的有定位的父级元素。如果父级元素都没有定位则返回body。

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>offset</title>
    <style>
        *{margin: 0;padding: 0;}
        .father{
            width: 400px;
            height: 400px;
            background-color: gray;
            margin: 0 auto;
            position: relative;
            border: 1px solid black;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            top: 100px;        //**
            left: 100px;        //**
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var f = document.querySelector('.father');
        var s = document.querySelector('.father').querySelector('.son');
        console.log(s.offsetLeft);
        console.log(s.offsetTop);
    </script>
</body>
</html>

假设把白色的盒子定位定在左上各一百的位置那么他的offsetleft和offsetTop的距离都为100

offsetWidth：返回该元素自身的宽度，包括border和padding和内容区域的宽度相加即可

offsetHeight：返回该元素自身的高度，包括border和padding和内容区域的高度相加即可

.son{
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            top: 100px;
            left: 100px;
            border: 1px solid black;        //此处多了上下左右各1像素的黑色实线
            padding: 2px;                    //多了上下左右各两像素的内边距
        }

宽度和高度如下图：

这里简单提一下offset和style的区别：

1、offset能获取任意样式表中的值；style只能获取内联样式中的值。

2、offset获得的数值是没有单位的；style获得的是带有单位的字符串

3、offsetWidth获取的值包含padding+border+width；style获取的值不包含padding+border。

4、offsetWidth等是只读属性，只能获取值不能赋值；style.width是可读写属性，也可以进行赋值

如果想要获取元素大小的位置，用offset系列

如果想更改元素值，用style属性

二、元素可视区client系列

client是指元素本身能看见的内容，使用此属性可以动态的获取各个元素的边框大小、元素本身的大小等。

元素本身能看见的内容，包括padding、内容，其中它不包括border、滚动条以及overflow被折叠起来的部分。

element.clientTop 返回元素上边框大小。即上边框的厚度，一般它的值就是0，因为滚动条不会出现在顶部。

element.clientLeft 返回元素左边框大小。即左边框的厚度，一般它的值就是0，因为滚动条不会出现在左侧。

element.clientWidth 返回元素自身可见的宽度。返回的数值不带单位。该元素自身可见的宽度 = 左右padding值 + 内容区宽度 clientWidth = [padding-left] + [width] + [padding-right]

element.clientHeight 返回该元素自身可见的高度。返回的数值不带单位。该元素自身可见的高度 = 上下padding值 + 内容区高度 offsetHeight = [padding-top] + [height] + [padding-bottom]

如果你想把溢出的部分隐藏，那么它返回的宽度就没有被隐藏的部分

三、元素滚动scroll系列

scroll指滚动，我们是用scroll系列可以动态获得该元素的大小、滚动距离等。

元素本身的试剂款嘟嘟，包括padding、内容、overflow隐藏的部分，但是不包括border、滚动条

element.scrollTop	返回被卷去的上侧距离。返回值不带单位。用于获取或设置位于对象最顶端和窗口中可见内容的最顶端之间的距离。
element.scrollLeft	返回被卷去的左侧距离。返回值不带单位。用于获取或设置位于对象左边界和窗口中目前可见内容的最左端之间的距离。
element.scrollWidth	返回元素的滚动宽度，即元素的实际宽度。返回值不带单位该元素的滚动宽度 = 左右padding值 + 内容区宽度 + overflow的宽度 scrollWidth = [padding-left] + [width] + [overflow] + [padding-right]
element.scrollHeight	返回元素的滚动高度，即元素的实际高度。返回值不带单位该元素的滚动高度 = 上下padding值 + 内容区高度 + overflow的高度 scrollHeight = [padding-top] + [height] + [overflow] + [padding-bottom]

onscroll事件：当滚动条在滚动时会触发此事件

window.pageXOffset	返回文档在窗口左上角水平方向滚动的像素。等价于 scrollX。用于获取或设置当前页面相对于窗口显示区左上角的 X 位置。
window.pageYOffset	返回文档在窗口左上角垂直方向滚动的像素。等价于 scrollXY。用于获取或设置当前页面相对于窗口显示区左上角的 Y 位置。

当整个页面出现滚动条时，即可获取它滚动条的距离

document.onscroll = function() {
console.log(document.documentElement.scrollTop);

}

Biegral Blog