JS OffsetParent属性
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">functionvar=""=</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">{:;:;:;:;}style>
<script type="text/javascript" language="JavaScript">functionvar=""=</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">{:;:;:;:;}style>
<script type="text/javascript" language="JavaScript">functionvar=""=</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定位的元素。
JS OffsetParent属性的更多相关文章
- JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性，这个属性是什么？
原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html Javascript中的offsetParent属性 支持的浏览 ...
- js对象属性 通过点(.) 和 方括号([]) 的不同之处
// js对象属性 通过点(.) 和 方括号([]) 的不同之处 // 1.点操作符: 静态的.右侧必须是一个以属性名称命名的简单标识符.属性名用一个标识符来表示.标识符必须直接出现再js ...
- js获取属性
js获取属性的方法: document.getElementById(); document.getElementsByTagname(); document.getElementsByClassna ...
- js中属性类型：数据属性与访问器属性
js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...
- JS中"属性"的用法
JS的属性和C#有相似之处 ! 使用get和set来进行属性的获取和设置 var obj={ a:"1", get age(){ return obj.a; }, set age ...
- JS修改属性，六种数据类型
JS修改属性 一般修改单个属性是通过JS修改的,比较方便.改多个属性通过css样式改更方便. 1.特殊:通过JS修改包含"-"符号的属性,例如margin-top // 特殊 修改 ...
- 动态设置js的属性
目标:js的属性名能够使用变量 举例:js对象object,当赋给该对象属性的时候能够採用下面方式 var object; object.prop1 = "value1"; obj ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- js实现属性只读
第一种 Object.defineProperty 这种是在vue源码中看见的 let obj = { $data: {} }; Object.defineProperty(obj, '$data', ...
随机推荐
- 经典算法题每日演练——第十一题 Bitmap算法
原文:经典算法题每日演练--第十一题 Bitmap算法 在所有具有性能优化的数据结构中,我想大家使用最多的就是hash表,是的,在具有定位查找上具有O(1)的常量时间,多么的简洁优美, 但是在特定的场 ...
- 项目中经常使用的JS方法汇总，非常有用
// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1- ...
- Contoso 大学 - 使用 EF Code First 创建 MVC 应用，实例演练
Contoso 大学 Web 示例应用演示了如何使用 EF 技术创建 ASP.NET MVC 应用.示例中的 Contoso 大学是虚构的.应用包括了类似学生注册.课程创建以及教师分配等功能. 这个系 ...
- 安全系列之二：OAuth2.0 开放授权协议
本文提取出OAuth2.0规范RFC6749的主要内容,部分内容从文档复制出来,给大家讲讲第三方授权背后的故事. 先是举个知乎的QQ登录授权的例子,然后讲四种授权方式,两种令牌,接着是看看协议流程,分 ...
- 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据
原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...
- github basic usage in windows
1. create a new accout, create orginazation, create repo 2. install git in your local pc Note: you c ...
- asp.net mvc3 数据验证（四）—Remote验证的一个注意事项
原文:asp.net mvc3 数据验证(四)-Remote验证的一个注意事项 前几篇把asp.net mvc3 中基于Model的主要数据验证的方法都已经讲完了,本节纯粹只是讲一个我 ...
- C语言连接Oracle
原文:C语言连接Oracle 最近在搞C语言连接Oracle.DB2数据库,现把C连接Oracle的文章总结下: 用C语言连接ORACLE数据库.有两个思路和目的 思路一)本地环境:UBUNTU 7. ...
- Codeforces 17D Notepad 简单的数论
从题意,anw = (b-1)*b^(n-1)%c,强调,为了b^(n-1). 弱渣只能推了宣传. phi(c)为小于c且与c互质的个数. 当x >= phi(c)时:A^x = A(x%ph ...
- 使用SoapUI 测试Web Service
原文:使用SoapUI 测试Web Service 如何测试写好的Webservice?你当然可以写代码来测试,但还是太麻烦,你得花时间去学习各语言的关于Webservice调用的相关API.这里推荐 ...