三大系列:offsetscrollclient
事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)
 
三大系列都是以DOM元素节点的属性形式存在的。
类比访问关系,也是以属性形式存在。
不同点在于,访问关系是为了获取其他节点,而三大系列是为了获取元素节点更多的信息。
 
 
 
 
 
1. offset 系列
offset:偏移、补偿、位移
offset 系列是 js 中的一套获取元素尺寸的便捷办法。
 
(1) offsetWidth 和 offsetHeight (检测盒子自身宽高+padding+border)
这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。
行内式、内嵌式、外链式都可以获取到。
offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
不包括margin。
 
(2) offsetLeft 和 offsetTop  (检测距离父盒子有定位的左/上面的距离)
返回距上级盒子中带有定位的盒子左边和上边的距离。和盒子本身有无定位无关。
如果父级都没有定位则以 body 为准
offsetLeft 从父级的 padding 开始算,父级的 border 不算。
在父盒子有定位的情况下,offsetLeft == style.left (去掉px)
 
(3) offsetParent   (检测父系盒子中带有定位的父盒子节点)(极少用)
① 返回该对象带有定位的父级
② 如果当前元素的父级元素没有CSS定位(position为absolute / relative / fixed), offsetParent为body;如果当前元素的父级元素中有CSS定位(position为absolute / relative / fixed),offsetParent 取最近的那个有定位的父级元素。
和盒子本身有无定位无关。
 
(4) offsetLeft 和 style.left 区别
① 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以。
② offsetLeft 返回的是数字,而 style.left 返回的是字符串,除了数字外还带有单位:px
③ offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
④ 如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
(style.left在等号的左边和右边还不一样。左边的时候是属性,右边的时候是值。)
 
 
2. Scroll 系列
(1)ScrollWidth 和 scrollHeight(不包括border)
检测盒子的宽高。(调用者:节点元素。属性。)
盒子内容的宽高。(如果有内容超出了,显示内容的高度)
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
 
(2)scrollTop 和 scrollLeft
网页,被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
 
(3)有兼容性问题
① 未声明 DTD 时(谷歌只认识他)
document.body.scrollTop
② 已经声明DTD 时(IE678只认识他)
document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的
window.pageYOffset
(4)兼容写法
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var top = document.documentElement.scrollTop + document.body.scrollTop;
 
3. client 系列
(1)clientWidth 和 clientHeight
clientWidth:获取网页可视区域宽度(两种用法)
clientHeight:获取网页可视区域高度(两种用法)
调用者不同,意义不同:
盒子调用,指盒子本身;body/html调用,指可视区域大小。 
 
(2)clientX 和 clientY
clientX:鼠标距离可视区域左侧距离(event调用)
clientY:鼠标距离可视区域上侧距离(event调用)
 
(3) clientTop 和 clientLeft  
获取盒子的 border 宽高
 
 
4. event 事件对象
(1)概述
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。
所有浏览器都支持event对象,但支持的方式不同。
比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)
普通浏览器支持 event(带参,任意参数)
ie 678 支持 window.event(无参,内置)
总结:他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
 
(2) 事件对象 event 的获取
IE678中,window.event 
在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.
  Box.onclick = function (aaa){   aaa就是event     }
 
(3) 兼容获取方式有两种:
不写参数直接使用event;
写参数,但是参数为event
var event  = event || window.event;(主要用这种)
 
(4) event 重要内容
 
 
(5) screenX、pageX 和 clientX 的区别
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)
pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)
 
(6) pageY 和 pageX 的兼容写法
在页面的位置 = 看得见的 + 看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left 
 
 
5. 三大家族区别(总结)
(1) Width 和 height
clientWidth  = width  + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不包含border)
scrollHeight = 内容高度(不包含border)
(2) top 和 left
offsetTop/offsetLeft :
     调用者:任意元素。(盒子为主)
     作用:距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)
     调用者:document.body.scrollTop/.....(window)
     作用:浏览器无法显示的部分(被卷去的部分)
clientY/clientX:(clientTop/clientLeft 值的是border)
     调用者:event.clientX(event)
     作用:鼠标距离浏览器可视区域的距离(左、上)
 
 
6. 获得屏幕宽高
window.screen.width
window.screen.height
分辨率是屏幕图像的精密度,指显示器所能显示的像素有多少。

JavaScript 特效之四大家族(offset/scroll/client/event)的更多相关文章

  1. 三大家族,offset,scroll,client

    1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法)    clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...

  2. offset / scroll / client Left / Top

    1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方 ...

  3. offset,scroll,client系列

    offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...

  4. JS中的offset scroll event client

    一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...

  5. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  6. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  7. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  8. JavaScript特效(调试笔记)

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

  9. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

随机推荐

  1. C#设计模式(16)——中介者模式

    1.中介者模式介绍 中介者模式,定义了一个中介对象来封装一系列对象之间的交互关系,中介者使各个对象之间不需要显式地相互引用,从而降低耦合性.在开发中我们会遇到各个对象相互引用的情况,每个对象都可以和多 ...

  2. golang命令行库cobra使用

    github地址:https://github.com/spf13/cobra Cobra功能 简单子命令cli 如  kubectl verion    kubectl get 自动识别-h,--h ...

  3. Git以及TortoiseGit的下载安装使用

    Git以及TortoiseGit的下载安装使用 下载git 下载地址:https://git-scm.com/然后进行一系列的安装,傻瓜式的操作即可 TortoiseGit Tortoise 英[ˈt ...

  4. C++-int类型整数超出范围后的处理

    最近做了一道题目: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: ...

  5. Contest2161 - 2019-3-21 高一noip基础知识点 测试4 题解版

    传送门 预计得分:100+100+100+10=310 实际得分:100+0+82+10=192 你们基础知识不行啊——by wxg T1 一看数据范围就是搜索 但是不能因为数据范围就断送了dp的心 ...

  6. 你对安卓触控一体机了解多少?视野还停留在windows一体机上?

    android一体机可以根据用户的不同需求拓展各种不同的硬件外接设备和各种应用软件,环境适应能力又强,所以在诸多领域的应用都非常受欢迎,并且还在不断地开拓新市场.安卓系统触摸一体机占据绝对性优势. 1 ...

  7. mongoose 连接数据库操作

    连接数据库 var mongoose = require('mongoose'); var schema = mongoose.Schema; // 连接MongoDB mongoose.connec ...

  8. [好文mark] 深度学习中的注意力机制

    https://cloud.tencent.com/developer/article/1143127

  9. Fiddler模拟自动响应数据

    Fiddler模拟自动响应数据 定位到要修改的部分 2.将返回的数据保存到本地,保存成网页,并修改响应数据 找到修改的部分,修改之 3.再次请求刷新首页,将工具定位到autoresponder将接口加 ...

  10. 【原创】大数据基础之Drill(2)Drill1.14+Hive2.1.1运行

    问题 Drill最新版本是1.14,从1.13开始Drill支持hive的版本升级到2.3.2,详见1.13的release notes The Hive client for Drill is up ...