关闭

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

时间: 2018-08-17阅读: 1390标签: 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

关闭

avaScript与WebAssembly进行比较+在哪些情况下会优于JavaScript

这是专门探索JavaScript及其构建组件的系列,在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。

JS方法整理_js常用函数大全

都是日常工作中使用的一些js方法,整理出来以便大家学习使用。主要包括:Js获取页面地址参数 、千分位 、判断是否数字 、图片按比例压缩、截取指定字节数的字符串、判断是否微信 、获取时间格式的几个举例 、获取字符串字节长度 、对象克隆、深拷贝 ...

javascript怎么输出?

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

js中async与defer

async 异步加载,立即下载,不应妨碍页面其他操作,标记为 async 的异步脚本并不保证按照指定的先后顺序执行,用async很容易出错,async 是无序执行,自身加载完就会执行;

js中bool值转换以及逻辑运算&&、||、 !!的使用

js作为一门弱类型语言,导致几乎所有数据都能转换为bool的类型,js转换 规则 。了解转换规则目的掌握逻辑运算符&&、||、 !!的使用

原生js实现数组随机排列(数组乱序)的方法.【快速洗牌算法】

在开发中遇到这样的问题,需要将一组已知数组的顺序打乱,按照以前和现在的做法,总结了以下方法。

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

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

javascript由几部分组成?

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

JS 超类和子类

看到javascript高级程序设计的面向对象章节看到超类与子类这个概念词,不懂上度娘查了才知道是怎么一回事。说到超类与子类,就不得不提起原型模式,原型对象,原型链与原型链继承了

JavaScript 优雅的实现方式包含你可能不知道的知识点【转】

Js优雅的实现方式包含你可能不知道的知识点:简短优雅地实现 sleep 函数,js获取时间戳,js数组去重,js数字格式化,js交换两个整数,将 argruments 对象(类数组)转换成数组,数字取整等

点击更多...

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