获取页面中任意一个元素距离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 ...
随机推荐
- 创建 Web 前端开发环境(node和npm以及git)
Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...
- 手动清除memcached缓存方法
1.查memcache状态/usr/bin/perl /usr/local/src/memcached-1.4.5/scripts/memcached-tool localhost:11211或者te ...
- mongoDB文档操作
数据库操作无非就是增.删.改.查.这篇主要介绍增.删.改. 1.增 Mongodb插入操作很简单,使用关键字“insert”.实例: > db.test.blog.insert({"h ...
- flex blazeds地址
flex blazeds地址 BlazeDS地址:http://sourceforge.net/adobe/blazeds/wiki/Home/最新BlazeDS版本是2011年编译的4.0.1.21 ...
- 分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
- Js中Array数组学习总结
第一次写博客...有点方... 小白一枚(是真的小白),自学前端,下面来说说我在学习过程中总结的一些数组操作,如果说哪有错误,请各位大神多多指出,小的虚心接受. 引用类型分为Object类型(所谓的对 ...
- linux下安装TensorFlow(centos)
一.python安装 centos自带python2.7.5,这一步可以省略掉. 二.python-pip pip--python index package,累世linux的yum,安装管理pyth ...
- CodeForces 722B
B. Verse Pattern time limit per test:1 second memory limit per test:256 megabytes input:standard inp ...
- win10环境下python3.5安装步骤
点我去Python官网下载 往下翻几页就能看到各种版本的Python,当前最新的是Python3.6,也没多大区别,我选择的是3.5.2 64位的,点击download 根据自己的电脑配置,我选择的是 ...
- Hadoop权威指南:HDFS-数据流
Hadoop权威指南:HDFS-数据流 [TOC] 剖析文件读取 客户端通过调用FileSystem对象的open()方法来打开希望读取的文件,对于HDFS来说, 这个对象是分布式文件系统的一个实例 ...