JS OffsetParent属性深入解析


Posted in Javascript onJanuary 13, 2014

offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。

句法:
parentObj = element.offsetParent

变量:
· parentObj 是一个元素的引用,当前元素的偏移量在其中计算。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
  function offset_init() {
  var pElement = document.getElementById("sonObj");
  parentObj = pElement.offsetParent;
  alert(parentObj.tagName);
    }
</script>
</head>
<body onload="offset_init()">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</body>
</html>

测试结果:
Firefox3:"BODY"
Internet Explorer 7:"BODY"
Opera 9.51:"BODY"
Chrome 0.2:"BODY"
Safari 3:"BODY

结论:
当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式,根元素都为Body元素)

测试代码2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#parent {
    position: absolute; <!-- position:relative; -->
    left: 25px;
    top: 188px;
    border: 1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
    function offset_init() {
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
    }
</script>
</head>
<body onload="offset_init()">
<div id="parent">div测试代码
<p id="sonObj">测试OffsetParent属性</p>
</div>
</body>
</html>

测试结果:
Firefox3:"DIV"
Internet Explorer 7:"DIV"
Opera 9.51:"DIV"
Chrome 0.2:"DIV"
Safari 3:"DIV"

结论:
当某个元素的父元素进行了CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为其父元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素

测试代码3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#Grandfather {
    position: relative;
    left: 25px;
    top: 188px;
    border: 1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init() {
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
    }
</script>
</head>
<body onload="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</h1>
</body>
</html>

测试结果:
Firefox3:"H1"
Internet Explorer 7:"H1"
Opera 9.51:"H1"
Chrome 0.2:"H1"
Safari 3:"H1"

结论:
当某个元素及其父元素都未进行CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近,并且已进行了CSS定位的元素。

Javascript 相关文章推荐
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
JavaScript网页定位详解
Jan 13 #Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 #Javascript
ie8本地图片上传预览示例代码
Jan 12 #Javascript
js 立即调用的函数表达式如何写
Jan 12 #Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 #Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 #Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 #Javascript
You might like
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
js实现分页功能
2017/05/24 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python实现二分法算法实例
2015/02/02 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Python标准库itertools的使用方法
2020/01/17 Python
python实现打砖块游戏
2020/02/25 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
大学生创业项目方案
2014/03/08 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
地道战观后感2000字
2015/06/04 职场文书
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
SQLServer常见数学函数梳理总结
2022/08/05 MySQL