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 TO HTML 转换
Jun 26 Javascript
showModelessDialog()使用详解
Sep 07 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
javascript中Function类型详解
Apr 28 Javascript
js中常用的Math方法总结
Jan 12 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
如何在PHP中读写文件
2020/09/07 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python实现画一颗树和一片森林
2018/06/25 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Pandas分组与排序的实现
2019/07/23 Python
pytorch 模型可视化的例子
2019/08/17 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
2015元旦家电促销活动策划方案
2014/12/09 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
通知函的格式
2015/04/27 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang