JavaScript：让你彻底弄清offset

【JavaScript：让你彻底弄清offset】的更多相关文章

JavaScript：让你彻底弄清offset

ylbtech-JavaScript:让你彻底弄清offset 1.返回顶部 1. 很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一不知道大家看到这张图的第一感觉如何,反正我的感觉就是“这次第,怎一个乱字了得”. 既然我认为上图太多太乱,那么我就把offset.scroll.client分开说,希望能让大家彻底弄清楚,今天只说offset. 一.关于o…

javascript中常用坐标属性offset、scroll、client

原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. 1.在文档(document)对象里面用: scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽) scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在…

前端攻城狮学习笔记九：让你彻底弄清offset

很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一不知道大家看到这张图的第一感觉如何,反正我的感觉就是“这次第,怎一个乱字了得”. 既然我认为上图太多太乱,那么我就把offset.scroll.client分开说,希望能让大家彻底弄清楚,今天只说offset. 一.关于offset,我们要弄明白什么 w3中offset相关页面是:http://www.w…

让你彻底弄清offset

很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一不知道大家看到这张图的第一感觉如何,反正我的感觉就是“这次第,怎一个乱字了得”. 既然我认为上图太多太乱,那么我就把offset.scroll.client分开说,希望能让大家彻底弄清楚,今天只说offset. 一.关于offset,我们要弄明白什么 w3中offset相关页面是:http://www.w…

JavaScript事件坐标区别（offset，client，page）

学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角下面来验证一下. 先上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"…

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

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

JavaScript、关于元素的offset~和client~

1.偏移量(offset dimension) =>offsetLeft(元素距离其父元素左边框(/上边框)的距离) =>offsetTop =>offsetWidth(元素的宽度/高度,包括元素的内容.内边距和边框) =>offsetHeight =>offsetParent(元素的父元素) 2.客户区的大小(client dimension) =>clientWidth(元素的宽度(/高度),包括元素的内容和内边距) =>clientHeight 注意:浏…

JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读评论(0) 收藏

原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该是获取window对象的属性. client:使用区.客户区.指的是客户区,当然是指浏览器区域. offset:偏移.指的是目标甲相对目标乙的距离. scroll:卷轴.卷动.指的是包含滚动条的的属性. inner:内部…

这些年，我收集的JavaScript代码

这些年,我收集的JavaScript代码(一) http://www.cnblogs.com/jscode/archive/2012/07/25/2605395.html 这些年,我收集的JavaScript代码(二) http://www.cnblogs.com/jscode/archive/2012/07/27/2610613.html 前端攻城狮学习笔记九:让你彻底弄清offset http://www.cnblogs.com/jscode/archive/2012/09/03/26692…

差别client、offset、scroll系列以及event的几个距离属性

element元素结点属性一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + padding+border+垂直滚动栏宽度这里的滚动栏就是单纯滚动栏的意思,不包含不可见的部分哦. 而element.offsetHeight与之相似,仅仅是改为垂直方向而已. 在页面布局中要计算和考虑的盒子的宽度和高度通经常使用这个属性. 2.offsetParent element.offs…