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开发者必备的10个Sublime Text插件
Feb 27 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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/01/17 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python django集成cas验证系统
2014/07/14 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
django框架自定义用户表操作示例
2018/08/07 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
思想政治自我鉴定
2013/10/06 职场文书
护理专业毕业生自我鉴定
2013/10/08 职场文书
优秀中专生推荐信
2013/11/17 职场文书
献爱心倡议书
2014/04/14 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
篝火晚会策划方案
2014/05/16 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
关于使用Redisson订阅数问题
2022/01/18 Redis
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers