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  THIS详解 面向对象
Mar 25 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
js实现简易拖拽的示例
Oct 26 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
function.inc.php超越php
2006/12/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
python采集百度百科的方法
2015/06/05 Python
python选择排序算法实例总结
2015/07/01 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
捷科时代的软件测试笔试题
2015/11/09 面试题
企业文化宣传标语
2014/06/09 职场文书
信用卡工资证明范本
2014/10/17 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书