元素的offsetParent属性 : 只读 属性 离当前元素最近的一个有定位属性的父节点
(一)：如果当前元素的DOM父节点没有定位的情况：
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，
如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，
那么offsetParent就会被指向到这个触发了layout特性的父节点上
（二）：如果当前元素的DOM父节点有定位的情况：
当前元素无论是否有定位的情况，其offsetParent就是离其最近的有定位的父节点元素
元素的offsetLeft/Top : 只读 属性 当前元素到定位父级的距离（偏移值），
到当前元素的offsetParent的距离。
1:如果当前元素没有定位父级
offsetParent -> body
offsetLeft -> html
2:元素父级有定位的情况
2-1：ie7以下：
2-1-1：如果元素自己没有定位，那么offsetLeft/Top是到body的距离
2-1-2：如果元素自己有定位，那么就是到定位父级的距离
2-2：其他浏览器：到定位父级的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>size</title>
<link rel="stylesheet" href="">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#parent {
width: 200px;
height: 200px;
margin: 0 auto;
margin: 50px;
border: 1px solid green;
position: relative;
padding: 20px;
}
#son {
width: 100px;
height: 100px;
border: 1px solid yellow;
margin: 50px;
padding: 10px;
/* position: absolute;
left: 0px;
top: 5px; */
}
/*
1：父类没有指定定位的时候，offsetTop就是子类的外边距(margin)+边框(border)+父类的到子类的外边距(父类的margin)101px
offsetLeft和offsetTop在IE8中出现了不一致的情况，区别有二：
1、>IE8的offsetLeft和offsetTop返回的是相对于offsetParent的值，而IE8之前返回的是相对于BODY的值；
2、I>E8的offsetLeft和offsetTop返回的值是包括offsetParent的borderLeftWidth和borderTopWidth的，IE8以前是不包括的；
2：父类指定的定位方式,那就是直接子类的top/left+子类的边距
父类设置啦margin+padding 在ie8/chrome等高级浏览器：子类的top是top/left+父类的mg+父类的pad
ie8以下：子类对父类的margin（外边距）
*/
</style>
</head>
<body>
<div id="parent">
<div id="son">
son
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var p = document.getElementById("parent");
var s = document.getElementById("son");
alert(s.offsetTop + "px"+"----"+getOffsetTop(s));
function getOffsetLeft(o) {
var left = 0;
while (o != null && o != document.body) {
left += o.offsetLeft;
o = o.offsetParent;
}
return left;
}
/*
*兼容ie6以上和ff的offsetTop
*/
function getOffsetTop(o) {
var top = 0;
while (o != null && o != document.body) {
top += o.offsetTop;
o = o.offsetParent;
}
return top;
}
}
</script>
</body>
</html>
分享到：
相关推荐
对flumelog-offset中的不同层进行基准测试，以查看性能问题在哪里。 方法 我拿了一个大文件（在这种情况下，是我的安全scuttlebutt本地日志，大小：343 Mb），并使用各种方法（不同的块大小）对其进行扫描。 （并...
关于LaravelLaravel是一个具有表达力，优雅... Laracasts包含1500多个视频教程，涉及各种主题，包括Laravel，现代PHP，单元测试和JavaScript。 深入我们全面的视频库，提高您的技能。 Laravel赞助商我们要感谢以下赞
我们先来看看这个bug 是怎么产生的。 代码如下: <style type=”text/css”> #div1 { width: 200px; height: 200px; background: red; } </style> 代码如下: ...以下是用来测试
我认为JavaScript中的FFT可以正常工作。 没有承诺，但是我曾经对Wolfram Alpha进行过测试，并且它相当准确。 有针对主要因子2、3、4的优化内核，因此，如果要获得高性能，请使用长度是这些因子的一个。 请注意，DFT...
可用于实现基于块的存储后端的测试套件和接口 安装 npm install abstract-chunk-store 一些使用这个的模块 ls-chunk-store 延迟大块存储 indexeddb-chunk-store idb-chunk商店 idbkv-chunk-store 高速缓存存储块...
帆布选框 ... 'Angular' , '测试跑马灯效果' ] ; var opts = { id : 'canvas' , data : textList , top : 20 , offset : 1 , gap : 10 , font : '20px Arial' , color : '#339966' } ; var marq
测试任务，呵呵简要地获取/：ID 邮政 / 放/：id 获取--每张图片和作者可用的最“有趣”的两个联接查询参数：sort，orderBy，limit，offset，author（隐含author.id） 验证：由于我没有使用准备好的语句，所以我认为...
在java中一个hashCode算法，可以用来计算一个字符串的hash值，今天一个朋友突然问俺能不能在js中计算hashCode，要求和java的hashCode计算结果一样。 对于java的hashCode，以前到现在也一直没有了解过其算法，不过...
BeatDetect.js是一个JavaScript ES6组件，用于计算曲目的BPM，包括其时间偏移和到其第一个真实拍子的时间偏移。 有几种方法可以微调流程，但是BeatDetect.js可以根据4/4 BeatDetect.js与现代音乐（在EDM音乐上效果...
这个编辑器是一个 Joomla 插件，兼容 Joomla 3.0 以上。 如果您想测试它，请从此处下载最新版本： 如果您不在前端使用 Bootstrap 3 模板，请确保在安装后启用内容插件。 这包括前端的 bootstrap css 和 js。 ##编辑...
npm run generate-data生成要测试的测试数据。 数据在./data文件夹中创建。 或者，您可以使用以下方法复制现有的SSB数据： mkdir -p ./data/db2/ node ./node_modules/jitdb/copy-json-to-bipf-async.js ~ /.ssb/...
最佳组合 我用布尔玛制作的更新后的响应式投资组合网站 安装 将存储库克隆到本地设备 文件夹已经结构化，因此请在浏览器中打开index.html文件进行测试...JavaScript areaObject哈希属性 jQuery offset（） jQuery scro
vec3 具有强大的单元测试的3D矢量数学。用法var v = require ( 'vec3' ) ;var v1 = v ( 1 , 2 , 3 ) ;console . log ( v1 ) ; // prints "(1, 2, 3)"var v2 = v1 . offset ( 0 , 0 , 1 ) ;console . log ( v2 ) ; //...
脱字词 获取插入符号中的单词。 安装 使用安装： ... 特此授予任何人免费获得本软件副本和相关文档文件（“软件”）的许可，不受限制地处理本软件，包括但不限于使用、复制、修改、合并的权利、发布、分发
Mr Porter Web 开发测试 任务 使用 API 构建动态产品列表页面 确保其布局适应移动/桌面视口 确保产品图像在视网膜设备上看起来清晰 实现分页/无限滚动 使用您认为适用的任何库/框架 不要担心页眉/页脚 使用以下。 ...
这个小插件可让您通过一个创始人创建的JS调用，自动修复网站上任何容器的位置。 演示版 兼容性 桌面上的现代浏览器（例如Chrome，Firefox和Safari）已经过测试。 基本用法 使用此插件，您可以通过一个JS调用在视口中...
##js-wallclock## 移动动作事件实验 ###演示### 这只能在移动设备上查看 ＃＃＃用法＃＃＃ 在正文底部包含 CSS 和 JS 脚本 实例化 wallClock 类 [removed] ...一加一 安卓 4.4 Chrome合金 好
es6-smoothscroll ES6 平滑滚动 npm i es6-smoothscroll ... offset : 0 , onScrollBefore : ( el ) => { } , onScrollAfter : ( el ) => { } } 贡献 npm test 注意力 目前没有测试 执照 :copyright:糖心
好吧，使用大多数原生过滤器（如上述limit和offset或测试equals或gte直接从请求的 url 中收取您的查询费用。 评论我听到你了，性能怎么样，或者安全怎么样？ 如果任何人都可以通过输入带有一些参数的 url 来轻松...