获取页面中任意一个元素距离body的偏移量
offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量
function offSet(curEle) {
var totalLeft = null;
var totalTop = null;
var par = curEle.offsetParent;
//首先把自己本身的相加
totalLeft += curEle.offsetLeft;
totalTop += curEle.offsetTop;
//现在开始一级一级往上查找,只要没有遇到body,我们就把父级参照物的边框和偏移相加
while (par){
if (navigator.userAgent.indexOf("MSIE 8.0") === -1){
//不是IE8我们才进行累加父级参照物的边框
totalTop += par.clientTop;
totalLeft += par.clientLeft;
}
//把父级参照物的偏移相加
totalTop += par.offsetTop;
totalLeft += par.offsetLeft;
par = par.offsetParent;
}
return {left: totalLeft,top: totalTop};
//返回一个数组,方便我们使用哦。
}
获取页面中任意一个元素距离body的偏移量的更多相关文章
- ××校招:前端线上笔试题--页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动
题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动: 原理: 1.页面上画一个圆,画一个圆心.在这个圆的圆周上面画一个点,我们就让这个点绕着圆周跑: 2.怎 ...
- js在页面中添加一个元素 —— 添加弹幕
参考地址 [往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加 ] 一.创建 HTML <div class="right_liuyan"&g ...
- 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动
<!DOCTYPE html> <html> <head> <title>Making things move</title> <me ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- js 获取任意一个元素的任意一个样式属性的值
//谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...
- 获取一个元素距离顶部的位置和window的滚动值
获取一个元素距离顶部的位置: $(".box").offset().top; 获取window的滚动值: $(window).scrollTop();
- (一)在HTML页面中实现一个简单的Tab
在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果 ...
- js获取页面中图片的总数
查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...
随机推荐
- Redis 排行榜 自己简单练习
<?php class Ranks{ const PREFIX = 'zhengban'; protected $redis = ''; /* 初始化 */ public function __ ...
- 在centos 6.5 x64中安装 spark-1.5.1
以下内容参考:http://blog.csdn.net/lovehuangjiaju/article/details/48494737 1.解压安装文件,设置环境变量 这里我们使用的安装文件是已经编译 ...
- box-sizing
Over the generations, people realized that math is not fun, so a new CSS property called box-sizing ...
- MySQL的"旁门左道"用法总结
不断更新. 一.显示当前MySQL服务的版本:1是直接在查询窗口select version();2是show variables like 'version';
- HUD-5124-lines
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5124 这题题目做的好悲催,比赛时题目意思不理解,也没有深究了,赛后又看了很久没有看懂,问了很多才搞懂, ...
- Raphael的text及对齐方式
Raphael的text及对齐方式 <%@ page language="java" contentType="text/html; charset=UTF-8&q ...
- 关于aop:pointcut的expression配制说明及JoinPoint
http://blog.csdn.net/wubai250/article/details/8102194 网上其它示例1:<aop:pointcut id="serviceMetho ...
- Java学习之旅基础知识篇:数据类型及流程控制
经过开篇对Java运行机制及相关环境搭建,本篇主要讨论Java程序开发的基础知识点,我简单的梳理一下.在讲解数据类型之前,我顺便提及一下Java注释:单行注释.多行注释以及文档注释,这里重点强调文档注 ...
- Web压力测试小工具:webbench、http_load、Siege、ab
webbench 安装 下载地址:http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz 或者 http://soft.vpser ...
- 正则匹配所有的a标签
<a\b[^>]+\bhref="([^"]*)"[^>]*>([\s\S]*?)</a>分组1和分组2即为href和value解释: ...