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 动态生成私有变量访问器
Dec 06 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
浅谈vue的第一个commit分析
Jun 08 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 函数使用方法与函数定义方法
2010/05/09 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
Python解析nginx日志文件
2015/05/11 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
门卫岗位职责
2013/11/15 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
会议欢迎标语
2014/06/30 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
欧元符号 €
2022/02/17 杂记
JS函数式编程实现XDM一
2022/06/16 Javascript
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技