三大家族之offset、scroll、client和event对象

三大家族之offset、scroll、client

1.offset家族

1. 元素.offsetWidth/Height //元素的宽高：content+padding+margin
2. 元素.offsetTop/Left //元素距离最近的有定位的父元素的距离
3. 元素.offsetParent //元素的距离最近的有定位的父元素

2.scroll家族

1. 元素.scrollWith/Height //如果内容的宽度/高度，就等于内容的宽高

2. 元素.scrollTop/Left //页面被卷曲的高度，有兼容问题

   解决办法：

   元素.scrollTopLeft = document.body.scrollTop/Left ||document.documentElement.scrollTop/Left

3.client家族

1. 元素.clientWidth/Height 元素得宽高：content+padding

2. 浏览器可视区域宽高：window.innerWidth/Height （有兼容问题）

   浏览器可视区域宽高：怪异模式：document.body.clientWidth

   ​ 标准模式 document.documentElement.clientWidth

4.在JQ中三大家族的使用

$("元素“).offset()

​ 语法：

1. 不传递参数的时候就是读取 ，读到的元素相对于页面的位置关系，返回值是一个对象 { left: xxx, top: xxx }
2. 传递一个对象就是写入 { left: xxx, top: xxx }

position()

​ 语法：

1. 只读的方法,元素相对于定位父级的位置关系,得到的也是一个对象 { left: xxx, top: xxx }

scrollTop()/scrollLeft()

​ 语法：

1. 不传递参数的时候就是获取卷去的高度/宽度
2. 传递一个参数就是设置卷去的高度/宽度

event 对象

• 存在兼容问题:

  var event = e ||window.event

• 获取鼠标距离页面可是距离的X,Y

  event.clientX 获取鼠标距离页面可视距离左侧的宽度

  event.clientY 获取鼠标距离页面可视距离顶部的高度

  event.pageX 获取鼠标距离页面左侧的宽度==event.clientX+window.scrollLeft(包括页面看的见的和看不见的)

  event.pageY 获取鼠标距离页面顶部的高度==event.clientY+window.scrollTop(包括页面看的见的和看不见的)

！！！ 以上是DaXiong本人对前端知识的理解总结，如内容知识有错误可以留言修改。

！！！如果以上内容帮助到了你，点击一下赞或者收藏吧！