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代码
Jan 12 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
Three.js基础部分学习
Jan 08 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
vue全局使用axios的操作
Sep 08 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
xmlHTTP实例
2006/10/24 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
说一说Python logging
2016/04/15 Python
python中的字典操作及字典函数
2018/01/03 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
外贸采购员求职的自我评价
2013/11/26 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
我爱我班主题班会
2015/08/13 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
《检阅》教学反思
2016/02/22 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang