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', ...
随机推荐
- JavaScript & XML
原文:JavaScript & XML 检测浏览器能力特性 //检测浏览器是否支持DOM2级XML var hasXmlDom = document.implementation.hasFea ...
- 浅谈 js 正则之 test 方法
原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...
- UVA11627-Slalom(二分法)
题目链接 题意:有n个宽为w的旗门,第i个旗门左端的坐标为(xi, yi),对于全部1 <= i < n满足yi < y(i+1).你有s双滑雪板,第j双的速度为sj(垂直向下的速度 ...
- 汽车之家购买价格PC真正的原因阿拉丁
网行业风起云涌,先是6月3号汽车之家天价竞购百度PC阿拉丁.接着今天又有消息说易车拿下百度移动阿拉丁.易车拿下百度移动阿拉丁能够想象.但PC阿拉丁被向来不屑流量购买,以自主流量自居的汽车之家拿 ...
- C/S模式开发中如何利用WebBrowser控件制作导航窗体
原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见 ...
- css2与css3的区别
css2与css3的区别 CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结: animation(基础动画)eg: div{animation: myfirst 5s linear ...
- NET中异常处理的最佳实践
NET中异常处理的最佳实践 本文翻译自CodeProject上的一篇文章,原文地址. 目录 介绍 做最坏的打算 提前检查 不要信任外部数据 可信任的设备:摄像头.鼠标以及键盘 “写操作”同样可能失效 ...
- Java_POI之MS-Excel2003(扩展名.xls)升级至MS-Excel2007及以上版本(扩展名.xlsx)技术过程概要
Java_POI之MS-Excel2003(扩展名.xls)升级至MS-Excel2007及以上版本(扩展名.xlsx)技术过程概要 作者:Eric.Zhang(花名:穿越者7号) 日期:2015年1 ...
- linux 下一个 jira-6.3.6 组态 皴 翻译 迁移数据库
每一个版本号翻译包下载 https://translations.atlassian.com/dashboard/download jira下载地址 https://www.atlassian.c ...
- 让低版本的IE浏览器 强制渲染为IE8 或者 以上 浏览器模式
让低版本的IE浏览器 强制渲染为IE8 或者 以上 浏览器模式 那么就要用下面的方法:让网页兼容ie9 复制代码 代码如下: <!–[if lte IE 8]> <meta http ...