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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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
合作指挥官:孟斯克
2020/03/16 星际争霸
用文本文件制作留言板提示(下)
2006/10/09 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python编程入门的一些基本知识
2015/05/13 Python
python交互式图形编程实例(二)
2017/11/17 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python实现ip代理池功能示例
2019/07/05 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
python excel和yaml文件的读取封装
2021/01/12 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
如何手工释放资源
2013/12/15 面试题
工程招投标邀请书
2014/01/30 职场文书
高中军训第一天感言
2014/03/06 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
小学美术教学反思
2016/02/17 职场文书