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 验证日期的函数
Mar 18 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
ES5和ES6中类的区别总结
Dec 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数据缓存技术
2007/02/14 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php截取中文字符串函数实例
2015/02/23 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
详解Python匿名函数(lambda函数)
2019/04/19 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python的缺点和劣势分析
2019/11/19 Python
python实现数字炸弹游戏
2020/07/17 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
运动会入场词100字
2014/02/06 职场文书
员工工作表现评语
2014/04/26 职场文书
社区服务活动总结
2014/05/07 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
2015元旦标语横幅
2014/12/09 职场文书
人事任命通知书
2015/04/21 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL