js中offset、scroll、event、client的区别和使用

时间: 2018-08-17阅读: 1296标签: js知识

用一句话概述:offset用于获取元素的实际显示尺寸 ,  scroll用于获取滚动后全部尺寸 ,  client用于获取不包括滚动条的实际显示尺寸,event用于获取鼠标的坐标位置。下面就详细介绍它们之间的使用和区别


一、offset 

(1)offsetWidth:检测盒子的高度,offsetWidth=width+padding+border 
(2)offsetHeight:检测盒子的高度,offsetHeight=Height+padding+border 
(3)offsetLeft:检测盒子距离有定位的父元素的左边的距离,不包含border,但包含padding,当父元素无定位时,则是距离body 
(4)offsetRight:检测盒子距离有定位的父元素的右边的距离,不包含border,但包含padding,当父元素无定位时,则是距离body 
(5)offsetTop:检测盒子距离有定位的父元素的上边的距离,不包含border,但包含padding,当父元素无定位时,则是距离body 
(6)offserBottom:检测盒子距离有定位的父元素的下边的距离,不包含border,但包含padding,当父元素无定位时,则是距离body 

二、scroll 

(1)scrollWidth:检测盒子的内容的宽,不包括border 
(2)scrollHeight:检测盒子的内容的高,不包括border 
(3)scrollTop:被卷去的上部部分 
(4)scrollLeft:被卷去的左部部分 
(5)onscroll():滚轮事件,只要滚动,无论是向上、下、左、右皆会触发,大多由window触发,语法:$(window).onscroll=function(){ 代码块 } 
**注意:scroll具有兼容性,兼容写法为(以scrollTop为例): 
Google:document.body.scrollTop; 
FireFox、IE:document.documentElement.scrollTop;** 

三、event 

event具有兼容性,IE6、7、8的兼容写法为:window.event 
event具有一些属性: 
(1)bubbles:是否为冒泡类型 
(2)button:鼠标哪一个按钮被点击 
(3)pageX/pageY:相对body,鼠标的坐标 
(4)screenX/screenY:相对浏览器,鼠标的坐标 
(5)clientX/clientY:相对浏览器的可视区域,鼠标的坐标 
(6)target:事件发生的源头 
(7)type:事件类型 

四、client 

(1)clientWidth:页面可视区域的宽,clientWidth=width+padding 
(2)clientHeight:页面可视区域的高,clientHeight=height+padding 

注意:client具有兼容性,兼容写法: 
IE9+:window.innerWidth/window.innerHeight 
标准模式(有DTD约束):document.documentElement.clientWidth/document.documentElement.clientHeight 
怪异模式(无DTD约束):document.body.clientWidth/document.body.clientHeight 
以上,说到event时提到过冒泡类型,在此,和大家解释一下什么是冒泡类型。冒泡:底层向上级传递。当一个元素上的事件被触发时,同样的事件在该元素的所有祖先元素中也被触发。捕获:上级向底层。说到冒泡和捕获,百年不得不说到事件监听器,事件监听器的语法:事件源.addEventListener(‘事件类型’,事件驱动程序,是否捕获,默认为false,即为不捕获,不捕获则为冒泡)。取消冒泡的方式: 
(1)IE10-写法:event.cancelBubble=true; 
(2)w3c规定写法:event.stopPropagation();


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1016

关闭

原生js判断当前页面是否为激活状态【判断用户是否在浏览当前页面】

但浏览器打开多个网页时候,如何判断我这个页面是否正在被用户浏览呢?我们可以通过document.hidden属性判断当前页面是否是激活状态。

javascript中的依赖注入

使用没有依赖的模块,显然这是很难实现的。即使你创建了很好的像黑盒一样的组件,但总有个将所有部分合并起来的地方。这就是依赖注入起作用的地方,当前来看,高效管理依赖的能力是迫切需要的,本文总结了原作者对这个问题的看法。

javascript怎么输出?

JavaScript怎么输出?输出方式有哪些?下面本篇文章就给大家介绍JavaScript的几种输出方式。window.alert()方法用于显示带有一条指定消息和一个【确认】 按钮的警告框。

javascript由几部分组成?

JavaScript有三部分组成。分别为核心(ECMAScript) 、文档对象模型(DOM)、浏览器对象模型(BOM)。这三部分分别描述了该语言的语法和基本对象、处理网页内容的方法和接口、与浏览器进行交互的方法和接口。

Js实现点击查看全文(类似今日头条、知乎日报效果)

这篇文章主要为大家详细介绍了原生JS+css仿QQ今日头条、知乎日报点击查看全文的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.

理解js中prototype和__proto__和的区别和作用?

在js中有句话叫一切皆对象,而几乎所有对象都具有__proto__属性,可称为隐式原型,除了Object.prototype这个对象的__proto__值为null。Js的prototype属性的解释是:返回对象类型原型的引用。每个对象同样也具有prototype属性,除了Function.prototype.bind方法构成的对象外。

用js打印hello world,JavaScript中你不知道的实现方式

如何使用js很装X的打印“hello world”,代码长短不重要,下面就整理一些实现方式。

JavaScript支持宏吗?

与其它类 Lisp 语言不同,不支持宏是 JavaScript 与生俱来的一个问题,这是因为宏会在编译时操作语法树,而这在像 JavaScript 这样的语言中几乎是不可能的。

JavaScript中的行为委托

行为委托简单来说就是一种设计模式,不同于传统的构造函数的类式设计。这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!