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 相关文章推荐
jQuery之自动完成组件的深入解析
Jun 19 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
原生javascript获取元素样式
Dec 31 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
Vue项目History模式404问题解决方法
Oct 31 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 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
如何开始收听短波广播
2021/03/01 无线电
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python爬虫之网页图片抓取的方法
2018/07/16 Python
详解python中的线程与线程池
2019/05/10 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
django 控制页面跳转的例子
2019/08/06 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python读取Kafka实例
2019/12/23 Python
python缩进长度是否统一
2020/08/02 Python
python跨文件使用全局变量的实现
2020/11/17 Python
机械系大学毕业生推荐信
2013/11/27 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
年会主持词结束语
2014/03/27 职场文书
青年文明号服务承诺
2014/03/31 职场文书
志愿者活动总结范文
2014/04/26 职场文书
网站推广策划方案
2014/06/04 职场文书
运动会演讲稿200字
2014/08/25 职场文书
年检委托书
2014/08/30 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Mysql 一主多从的部署
2022/05/20 MySQL