JavaScript CSS修改学习第一章 查找位置


Posted in Javascript onFebruary 19, 2010

offset
在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的。他们会给出你元素相对于父元素的坐标位置。

这段代码会向上查找offsetParent,然后添加offsetTop和offsetLeft。最终无论offsetParent在哪,他都会给出你元素在屏幕上的真正坐标。

解释
这段代码非常简单。先传入要计算的元素,然后设置变量curleft和curtop为0。

function findPos(obj) { 
var curleft = curtop = 0;

如果浏览器支持offsetParent:
if (obj.offsetParent) {

每次我们找到一个新的对象的时候,把他的offsetTop和offsetLeft加到curtop和curleft上:
do { 
curleft += obj.offsetLeft; 
curtop += obj.offsetTop;

小技巧:返回'='的值
下面就是这个技巧:
} while (obj = obj.offsetParent);

这个不是表达式错误。我不想用'=='来比较obj和obj.offsetParent(那也没有用,因为一个元素肯定和他的父元素不相等)。

所以我用'='来把obj.offsetParent的值传递给obj。在这里我对这个技巧有详细的解释。

简单的返回
这个循环会当元素没有了offsetParent的时候结束。当offsetParent存在的时候,就依然会把offsetLeft加到curleft上,把offsetTop加到curtop上。

当循环技术的时候,我们就把坐标返回给调用这个函数的程序。

return [curleft,curtop];}

翻译地址:http://www.quirksmode.org/js/findpos.html

转载请保留以下信息
作者:北玉(tw:@rehawk)

Javascript 相关文章推荐
随窗体滑动的小插件sticky源码
Jun 21 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
javascript实现Table排序的方法
May 15 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 #Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 #Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 #Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 #Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 #Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 #Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 #Javascript
You might like
php开启安全模式后禁用的函数集合
2011/06/26 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
js导出txt示例代码
2014/01/14 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python 队列详解及实例代码
2016/10/18 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Python使用functools实现注解同步方法
2018/02/06 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
六道php面试题附答案
2014/06/05 面试题
十一酒店活动方案
2014/02/20 职场文书
六一亲子活动总结
2014/07/01 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
总结高并发下Nginx性能如何优化
2021/11/01 Servers
如何解决php-fpm启动不了问题
2021/11/17 PHP