JSjs进阶--之JS三大家族：offset家族 Scroll家族 client家族

Posted 2020-11-19 Nico的技术博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSjs进阶--之JS三大家族：offset家族 Scroll家族 client家族相关的知识，希望对你有一定的参考价值。

1.1 三大家族和一个事件对象

三大家族（offset/scroll/client）

事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控制）

1.2 Offset家族简介

offset这个单词本身是--偏移，补偿，位移的意思。

js中有一套方便的获取元素尺寸的办法就是offset家族；

offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent

共同组成了offset家族。

1.2.1 offsetWidth和offsetHight （检测盒子自身宽高+padding+border）

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

offset宽/高 = 盒子自身的宽/高 + padding+border；

offsetWidth =width+padding+border；

offsetHeight =Height+padding+border；

1.2.2 offsetLeft和offsetTop （检测距离父盒子有定位的左/上面的距离）

返回距离上级盒子（带有定位）左边s的位置

如果父级都没有定位则以body为准

offsetLeft 从父亲的padding 开始算,父亲的border 不算。

在父盒子有定位的情况下，offsetLeft == style.left(去掉px)

1.2.3 offsetParent （检测父系盒子中带有定位的父盒子节点）

1、返回改对象的父级（带有定位）

如果当前元素的父级元素没有进行CSS定位（position为absolute或 relative，fixed）， offsetParent为body。

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

1.3 offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。

而 style.left不可以

二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）

四、如果没有给 html 元素指定过 top 样式，则style.top 返回的是空字符串。

style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）

Scroll家族组成

ScrollWidth和scrollHeight（不包括border）

检测盒子的宽高。（调用者：节点元素。属性。）

盒子内容的宽高。（如果有内容超出了，显示内容的高度）

IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小

scrollLeft和scrollTop

网页，被浏览器遮挡的头部和左边部分。

被卷去的头部和左边部分。

兼容性问题

一、未声明 DTD（谷歌只认识他）

document.body.scrollTop

二、已经声明DTD（IE678只认识他）

document.documentElement.scrollTop

三、火狐/谷歌/ie9+以上支持的

window.pageYOffset

兼容写法

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var aaa = document.documentElement.scrollTop + document.body.scrollTop;

事件event

1.1 事件对象的获取（event的获取）

IE678中，window.event

在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.

Box.onclick = function (aaa){ aaa就是event }

1.2 兼容获取方式有两种：

不写参数直接使用event;

写参数，但是为event....var event = event || window.event;(主要用这种)

1.3 event内容重要内容

PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）

ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）

ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

1.1 PageY和pageX的兼容写法（很重要）

在页面位置就等于 = 看得见的+看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

client家族

1.1 主要成员

1、clientWidth 获取网页可视区域宽度（两种用法）

clientHeight 获取网页可视区域高度（两种用法）

调用者不同，意义不同：

盒子调用：指盒子本身。

body/html调用：可视区域大小。

2、clientX 鼠标距离可视区域左侧距离（event调用）

clientY 鼠标距离可视区域上侧距离（event调用）

3、clientTop/clientLeft 盒子的border宽高

1.2 三大家族区别（三大家族总结）

1.2.1 Width和height

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

scrollWidth = 内容宽度（不包含border）width + padding

scrollHeight = 内容高度（不包含border）

1.2.2 top和left

offsetTop/offsetLeft：

调用者：任意元素。(盒子为主)

嘛作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)

调用者：document.body.scrollTop/.....(window)

嘛作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX:（clientTop/clientLeft 值的是border）

调用者：event.clientX(event)

嘛作用：鼠标距离浏览器可视区域的距离（左、上）。

// width和height
// offset带border
// scroll不带border，内容的宽高
// client不带border

// top和left
// offset距离父系盒子带有定位的盒子之间的距离
// scroll被卷去的部分的距离
// clientborder的宽高

//clientX和clientY
// event调用，鼠标距离浏览器的可视区域的距离