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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
理解javascript模块化
Mar 28 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
domReady的实现案例
Nov 23 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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
Windows下的PHP5.0详解
2006/11/18 PHP
PHP制作用户注册系统
2015/10/23 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
python 调整图片亮度的示例
2020/12/03 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
应用服务器有那些
2012/01/19 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
银行求职自荐信
2014/06/30 职场文书
学生会个人总结范文
2015/02/15 职场文书
团队执行力培训心得体会
2015/08/15 职场文书