javaScript中三大家族总结

三大家族整体解释图

第一大家族：offset家族

offset 是自己的……
目的： 方便的获取元素尺寸

offsetWidth offsetHeight

得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width + border + padding

offsetLeft offsetTop

返回距离上级盒子（最近的带有定位）左边的位置
如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetLeft 从父级的padding 开始算 父亲的border 不算
总结一下： 就是子盒子到定位的父盒子边框到边框的距离

offsetParent

返回改对象的父级 （带有定位） 不一定是亲的爸爸
1、如果当前元素的父级元素没有进行CSS定位，offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

offsetTop style.top 的区别

一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，而 style.top 可读写。
四、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
五、最重要的区别:style.left 只能得到 行内样式 ,offsetLeft 随便。

event 常见属性

data 返回拖拽对象的URL字符串（dragDrop）
width 该窗口或框架的高度
height 该窗口或框架的高度
pageX 光标相对于该网页的水平位置（ie无）
pageY 光标相对于该网页的垂直位置（ie无）
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
clientX 光标相对于该网页的水平位置 （当前可见区域）
clientY 光标相对于该网页的水平位置

pageX clientX screenX 区别

1、 screen X screenY 是以我们的电脑屏幕 为基准点 测量
2、pageX pageY 以我们的文档（绝对定位）的基准点 对齐
ie6/7/8 不认识
3、clientX clientY 以 可视区域 为基准点 类似于 固定定位

防止选择拖动

我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容 ,代码如下：
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

第二大家族：scroll家族

scroll 滚动的

scrollTop scrollLeft

scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

scrollTop兼容性写法

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

scrollTo(x,y)

window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

第三大家族：client家族

client 可视区域

检测屏幕宽度(分辨率)

clientWidth 返回的是 可视区 大小 浏览器内部的大小
window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关系

区别：

offsetWidth: width + padding + border
clientWidth： width + padding 不包含border
scrollWidth: 大小是内容的大小