JavaScript 特效之四大家族（offset/scroll/client/event）

【JavaScript 特效之四大家族（offset/scroll/client/event）】的更多相关文章

JavaScript 特效之四大家族（offset/scroll/client/event）

三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以属性形式存在. 不同点在于,访问关系是为了获取其他节点,而三大系列是为了获取元素节点更多的信息. 1. offset 系列 offset:偏移.补偿.位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法. (1) offsetWidth 和 offsetHeigh…

三大家族，offset,scroll,client

1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法) clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省浏览器调用:可视区域大小. 2.clientX 鼠标距离可视区域左侧的距离(event调用) clientY 鼠标距离可视区域上侧的距离(event 调用) 2.三大家族的区别 2.1Width 和 Height clientWidth = width +padding clientheight = heig…

offset / scroll / client Left / Top

1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 2.clientHeight / clientWidth (只读) clientHeight:元素内容区的高度+元素内边距的高度 clientWidth:元素内容区的宽度+元素内边距的宽度 clientWidth = width + padd…

offset,scroll,client系列

offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParent顶部的距离offsetLeft: 距离offsetParent左边的距离offsetParent: 最近的带有定位的父盒子 scrollHeight: 内容高,不含borderscrollWidth: 内容宽,不含border scrollTop: 被滚动条卷走的部分document.docume…

JS中的offset scroll event client

一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border offsetTop和offsetLeft是调用者的盒子距离有定位的父盒子顶部和左侧的长度.如果父盒子都没有定位,就以body为准,如果调用者自身没有top和left时,从父盒子的padding开始计算,不包括border 二.scroll 各种特效和动画中用的比较多,表示在页面滑动的过程中,卷起的部分 s…

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

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1…

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

DOM盒模型和位置 client offset scroll 和滚动的关系概览在dom里面有几个描述盒子位置信息的值, pading border margin width height client clientWidth 不要border clientHeight 不要border offset offsetTop offsetLeft offsetWidth 要border offsetHeight 要border scroll scrollTop scrollHeight scr…

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

注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步) 1.以下代码放在一个新建页面的HTML的<body></body>区即可:[页面上必须什么都没有] <html> <head> <TITLE>特效</TITLE> </head> <script language=j…

JavaScript特效（调试笔记）

JavaScript特效一.在网页上显示当前的时间日期,例如:“2016年3月26日星期六”. js源代码: function getTime() { var today = new Date(); //返回当日的日期和时间. var year = today.getFullYear(); //获得当前的年份 var month = today.getMonth() + 1; //获得当前的月份 var day = today.getDate(); //获得当前的日期 var weekday…

Canvas与javaScript特效笔记

第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每一个canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形.浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能. 为了能在 JavaScript 中引用元素,最好给元素设置 id:也需要给 canvas…