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 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
vue实现分页组件
Jun 16 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 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的引用计数机制
2013/06/14 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
js实现文字截断功能
2016/09/14 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
python中正则的使用指南
2016/12/04 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
《小猫刮胡子》教学反思
2014/02/21 职场文书
学习方法演讲稿
2014/05/10 职场文书
求职意向书范本
2015/05/11 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL