三大家族整体解释图

第一大家族：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: 大小是内容的大小

javaScript中三大家族总结相关推荐

Javascript使用三大家族和事件来DIY动画效果相关笔记（一）
1.offset家族 ◆offsetWidth和offsetHeight表示盒子真实的宽度高度,这个真实的宽度包括四周的边框.四周的padding.及定义的宽度高度或内容撑开的高度和宽度,可以用来检 ...
Javascript使用三大家族和事件来DIY动画效果相关笔记（五）
1.client家族 ◆box.clientWidth:表示盒子的宽度加padding ◆box.clientHeight:表示盒子的高度加padding ◆box.clientTop:表示盒子上边的 ...
JavaScript基础——滚动事件、加载事件、三大家族
文章目录一.滚动事件和加载事件 1.1 滚动事件 1.2 加载事件二.三大家族 2.1 scroll家族 2.2 offset家族 2.3 client家族一.滚动事件和加载事件 1.1 滚动事 ...
JavaScript——三大家族总结
目录前言一.offset家族 offsetWidth和offsetHeight offsetLeft和offsetTop offsetParent offsetxxx和style.xxx的区别二 ...
js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
三大家族scroll、offset、client
三大家族scroll.offset.client JS的三大家族主要是Offset.Scroll.Client,通过对三大家族不同属性的灵活使用,我们可以模拟出很多炫酷的JS动画,增强界面的视觉感染力 ...
JavaScript中的面向对象程序设计
本文内容目录顺序: 1.Object概念讲述: 2.面向对象程序设计特点: 3.JavaScript中类和实例对象的创建: 4.原型概念: 5.原型API: 6.原型对象的具体使用:7.深入理解使用原 ...
遍历JavaScript中的数组
在Java中,可以使用for循环遍历数组中的对象,如下所示: String[] myStringArray = {"Hello", "World"}; for ...
Json学习总结（1）——Java和JavaScript中使用Json方法大全
2019独角兽企业重金招聘Python工程师标准>>> 摘要:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript ...

javaScript中三大家族总结

三大家族整体解释图

第一大家族：offset家族

offsetWidth offsetHeight

offsetLeft offsetTop

offsetParent

offsetTop style.top 的区别

event 常见属性

pageX clientX screenX 区别

防止选择拖动

第二大家族：scroll家族

scrollTop scrollLeft

scrollTop兼容性写法

scrollTo(x,y)

第三大家族：client家族

检测屏幕宽度(分辨率)

区别：

javaScript中三大家族总结相关推荐

最新文章

热门文章