元素的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>
分享到：
相关推荐
一个非常轻量且功能强大的原始 JavaScript 完成建议器。JavaScript 自动完成一个非常轻量且功能强大的原始 JavaScript 完成建议器。已在 Firefox、Safari、Chrome、Opera、Internet Explorer 8+ 中测试。无依赖项，...
对flumelog-offset中的不同层进行基准测试，以查看性能问题在哪里。 方法 我拿了一个大文件（在这种情况下，是我的安全scuttlebutt本地日志，大小：343 Mb），并使用各种方法（不同的块大小）对其进行扫描。 （并...
- **filter()**：创建一个新的数组，其包含通过所提供函数实现的测试的所有元素。例如，`var filteredArray = array.filter(function(element) { return element > 10; });` - **indexOf()**：返回数组中第一个...
"offset-unknownshare.github.io"这个标题可能是指一个基于GitHub的个人或项目网页，它可能与JavaScript有关，尤其是涉及到网页元素的位置计算或者事件处理。描述中没有提供具体信息，但我们可以根据标签...
JavaScript为我们提供了几种方法来获取或计算一个DOM元素的offset，包括纯JavaScript实现和使用jQuery库。 ### 纯JavaScript实现 纯JavaScript的实现可以通过直接操作DOM元素的offsetLeft和offsetTop属性来获取...
"mscom-offset-menu"是一个与JavaScript相关的项目，主要关注的是菜单导航组件的实现。这个项目的重点可能是优化用户体验，特别是当用户滚动页面时菜单项的偏移处理，以便于用户能够快速访问页面的不同部分。"改进/...
悬浮播放器的核心在于通过JavaScript和CSS来控制播放器元素的位置变化。当用户滚动页面时，通过监听`scroll`事件来判断当前滚动条的位置，并据此改变播放器的位置属性。 ##### 2. CSS动画效果 在本例中，利用了CSS...
Z-Offset在3D地图渲染中尤为重要，它可以调整元素的垂直位置，例如在建筑物或地形等复杂场景中确保正确的叠加顺序和视觉效果。这使得用户能够创建更丰富的3D环境，提升地图的立体感和真实感。 2. **性能优化**：每...
在IT领域，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本篇文章将详细讲解如何使用jQuery实现鼠标拖动元素并改变其位置的功能，这对于构建交互式用户界面至关...
在"大文章分页测试"这个项目中，可能包含了具体的C#代码示例、数据库查询示例以及相关的HTML和JavaScript代码，这些都是实现上述步骤的具体实践。通过学习和分析这个项目，开发者可以掌握在ASP.NET环境中实现大文章...
为了方便测试和展示，我们通常会有一个`Index.htm`作为主入口文件，这里将包含HTML结构和必要的JavaScript代码。 在HTML结构中，你需要为需要实现滚动跟随效果的元素添加一个唯一的ID，例如`#follow-me`。然后在...
- **#selector**: 设置下拉列表的样式，包括初始时隐藏(`visibility: hidden`)、绝对定位(`position: absolute`)等属性，确保它可以在合适的位置出现。 - **.chenge**: 设置内容展示区域的样式，使其居中对齐。 ###...
关于LaravelLaravel是一个具有表达力，优雅... Laracasts包含1500多个视频教程，涉及各种主题，包括Laravel，现代PHP，单元测试和JavaScript。 深入我们全面的视频库，提高您的技能。 Laravel赞助商我们要感谢以下赞
- **`test` 方法**: 用于测试一个字符串是否符合某个正则表达式。 - 示例: `/\d+/.test("123")` 返回 `true`。 - **`match` 方法**: 用于查找一个字符串与正则表达式的匹配部分，并返回匹配的结果。 - 示例: `"186...
Bootstrap中的Affix控件是一个强大的工具，用于创建响应式的页面元素，特别是导航栏，使其在用户滚动页面时始终保持可见。这个功能增强了用户体验，因为它确保关键的导航或信息总是容易访问。Affix通过监听浏览器的...
### ASP 脚本只弹出一次：避免多次弹出的技术实现 在Web开发中，弹窗（Popup）是一种常见的交互方式，用于显示提示信息、广告或其他内容。然而，频繁出现的弹窗可能会干扰用户的正常浏览体验，因此，实现弹窗只在...
- **偏移(offset)**：使用 `.col-md-offset-*` 类可以将列向右偏移。这个类通过增加左侧的 margin 来实现。 - **嵌套(nesting)**：可以在已有的列中再嵌套 `.row` 和 `.col-*` 类来创建复杂的布局结构。 - **标题*...
在JavaScript编程中，获取HTML元素的位置是一项常见的任务，特别是在构建复杂的网页布局或者进行交互式设计时。本资源包提供了一种解决这个问题的方法，特别适用于处理跨框架（iframe）的情况，而且支持无限级嵌套。...
- **断言模块**：提供了一系列断言函数用于测试和调试，确保代码按预期工作。 - `assert(value[, message])`：检查给定值是否为真。 - `assert.deepEqual(actual, expected[, message])`：检查两个对象是否具有...