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 建立对象的方法
Apr 21 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 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
laravel5实现微信第三方登录功能
2018/12/06 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python实现自动发送邮件功能
2021/03/02 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
文明教师事迹材料
2014/01/16 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技