三大家族的介绍

Posted 2020-10-19 pavilion-y

2. 三大家族

2.1. offset家族

offset系列用于用于获取元素自身的大小和位置，在网页特效中有广泛应用

offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop

offsetHeight与offsetWidth

1. 获取的是元素真实的高度和宽度
2. 获取到的是数值类型，方便计算
3. offsetHeight与offsetWidth是只读属性，不能设置。

style.height与style.width

1. 只能获取行内样式
2. 获取到的是字符串类型，需要转换

offsetHeight与offsetWidth的构成

offsetHeight = height + paddnig + border

offsetWidth = width + padding + border

2.2. scroll家族

scroll家族用来获取盒子内容的大小和位置

scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop

1. scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。

2. scrollTop是盒子内容被滚动条卷去的头部的高度。scrollLeft是盒子内容被滚动条卷去的左侧的宽度。

   

(window.)onscroll事件，对于有滚动条的盒子，可以使用onscroll注册滚动事件，每滚动一像素，就会触发该事件。

var box = doucment.getElementById(“box”);
box.onscroll = function(){
    //事件处理程序
}

获取页面被卷去的高度和宽度

通常来说，scroll家族用的最多的地方就是用来获取页面被卷去的宽度和高度，非常的常用

页面被卷去的高度和宽度的兼容性封装

 

document.documentElement(html)

 

function scroll() {
    return {
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    };
}

//如何使用
console.log(scroll().top);//获取页面被卷去的头部的距离
console.log(scroll().left);//获取页面被卷去的左侧的距离

2.3. client家族

client家族用于获取盒子可视区的大小

client家族有clientWidth、clientHeight、clientLeft、clientTop

如果内容没有超出盒子范围：clientWidth与scrollWidth相同

三大家族对比

clientTop与clientLeft

clientTop**与clientLeft完全没有用，他们就是borderTop**与borderLeft

但是：如果有滚动条，还会包含滚动条的宽度，但是见过滚动条在上边或者左边的？

onresize事件：onresize事件会在窗口被调整大小的时候发生。

window.onresize = function(){
    //事件处理程序
}

client系列一般用来获取页面的可视区宽高

function client() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}