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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
react 不用插件实现数字滚动的效果示例
Apr 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中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
销售总监工作职责
2013/11/21 职场文书
办公室内勤工作职责
2013/12/11 职场文书
中学生个人自我评价
2014/02/06 职场文书
2015年双拥工作总结
2015/04/08 职场文书