Fork me on GitHub

js特效之三大家族、event事件

老是忘,好好整理一下。 三大家族:offset(位移)、scroll(卷页)、client(可视区)。 1、offset家族( 5个属性) (1)offsetWidth和offsetHeight:检测盒子自身的宽高; 注意:包含盒子的padding和border。 offsetWidth=width+padding+border; offsetHeight=height+padding+border;
(2)offsetLeft和offsetTop:检测距离父盒子有定位的左侧和上面的距离; 注意:父盒子没有定位,往上找有定位的盒子,如果都没有以body为准,从父盒子的 padding开始算,border不算。 (3)offsetParent:用于获取该元素中有定位的最近父级元素; 注意:如果当前元素的父级元素都没有进行定位,那么offsetParent为body。 (4)与style.width/height/top/left的比较;
a).offset家族只可以只读,而style系列可以读写;
b).offset家族返回的是数值类型(四舍五入),style系列返回的是字符串(带px),特殊情况:在父盒子有定位的情况下,offsetLeft==style.left(没有 px);
c).offsetLeft 和 offsetTop 可以返回没有定位的元素的left值和top值,而style 不可以。

2、scroll家族(4个属性) (1)scrollWidth和scrollHeight:检测内容的宽高; 注意:如果内容超出盒子,显示内容的高度,如果不超出盒子,IE567可以显示实际内 容宽高,IE8+火狐+谷歌显示盒子大小。 (2)scrollTop和scrollLeft(有兼容性问题):网页被浏览器遮住的头部和左边的部 分; (3)处理兼容性问题: - 未声明 DTD(谷歌只认识他)(火狐IE9+认识他) document.body.scrollTop/scrollLeft - 已经声明DTD(IE678只认识他)(火狐IE9+认识他) document.documentElement.scrollTop/scrollLeft - 火狐/谷歌/ie9+以上支持的(不管DTD) window.pageYOffest/pageXOffest 兼容性写法: var scrollTop = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop||0; 封装scroll方法 function Scroll() { return { “left”: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0, “top”: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0 }; } 用scroll().top或scroll().left来获取值。 3.client家族(6个属性) (1).clientWidth和clientHeight:网页可视区内容宽高; 注意:盒子调用:指盒子本身宽高(包括padding),HTML/body调用指可视区域大 小。 (2).clientX和clientY:鼠标距离可视区域左侧、上面的距离(event调用); (3).clinetTop和clientLeft:盒子的border宽高; event事件:在触发某个事件时都会产生对象event,里面包含了一些事件信息。 为了兼容ie678,可以这样写 event=event||window.event; 其中有6重要属性: (1)pageX和pageY:光标在网页中的位置(距离左侧和上侧);//参照点为左上角,算滚动区域 (2)screenX和screenYY:光标在屏幕中的位置(距离左侧和上侧);//相对于屏幕 (3)clientX和clientY:光标在浏览器中位置(距离左侧和上侧);//参照点为左上角,不会算上滚动区域

-------------本文结束感谢您的阅读-------------

本文标题:js特效之三大家族、event事件

文章作者:陈晓拉尼

发布时间:2017年08月01日 - 20:08

最后更新:2018年09月11日 - 00:09

原始链接:http://yoursite.com/archives/16733.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。