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 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
分享几个JavaScript运算符的使用技巧
Apr 24 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实现的zip文件内容比较类
2014/09/24 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
Element Badge标记的使用方法
2020/07/27 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python中replace方法实例分析
2014/08/20 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python学习小技巧总结
2018/06/10 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
服装区域经理岗位职责
2015/04/10 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
小学教代会开幕词
2016/03/04 职场文书