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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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 无法载入mysql扩展
2010/03/12 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python实现八大排序算法(2)
2017/09/14 Python
Python批量启动多线程代码实例
2020/02/18 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
同意转租证明
2015/06/24 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
Python中的socket网络模块介绍
2022/07/23 Python