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', ...
随机推荐
- 虚拟机安装麒麟3.2时报unkown filesystem，you need to load the linux kernel first
工作的需要,安装在虚拟机上的麒麟3.2的64位版本号. 使用虚拟机VMware Workstation 9.0,依照常识目标DVD光盘文件的类型选择Other Linux 2.6.x Kernel 6 ...
- shell的定义
shell一些符号区别对待不同的定义.主要的定义3途径: (1)单引號 (2)双引號 (3)反引號 我们最经常使用的就是双引號和单引號.对于这2个符号,用$变量能够非常清楚的说明它们的差别,例如以下: ...
- Tair LDB基于Prefixkey找到如何提取一系列性能优化项目key的prefix_size
眼下项目已快截止,编码任务也基本完毕.如今主要是性能測试. 项目是依照"Tair LDB基于Prefixkey的范围查找性能优化项目提议方案"的步骤一步步完毕的,首先先介绍第一个关 ...
- centos 之7zip
首先,我得说几句,我第一次进行了实验. 压缩文件夹html rar压缩 成绩5.18M zip压缩 成绩5.06M 7z压缩 成绩870K 第一种,源代码编译安装 官网下载地址:http:/ ...
- vs2012连接sql2008(错误类型：Could not load file or assembly)
发生错误: Sql Server2008数据库中有一个数据库. 我想ORM-Entity FrameWork技术,在自己主动了一个项目,建立一个实体类! 解决的方法: 出现上面的情况.是由于缺少了这两 ...
- Swift # Apple Pay集成
苹果正式开放了Apple Pay支付系统.Apple Pay是一个基于NFC的支付系统,不久将被数以万计的线下零售商店予以支持.即便这项科技并不是彻底的突破性进展,但它足以推动许多公司和零售商来支持这 ...
- 还是畅通project（杭州电1233）
还是畅通project Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- iOS程序发布时出现your application is being uploaded解决办法
当用Xcode发布app时候出现“your application is being uploaded”或者用Application Loader 一直出现“ 正在通过ITUNES STORE进行鉴定 ...
- Hibernat之关系的处理多对多
第一步:编写两个pojo,比如一个学生表一个课程表 这里使用注解. 需要 课程表: package com.qcf.pox; import java.util.HashSet; import jav ...
- Oracle 11g for Windows 简体中文版的安装过程
原文:Oracle 11g for Windows 简体中文版的安装过程 我的配置 操作系统:Windows Server 2003 sp2 内存:1024M以上 1.下载Oracle 11g 地址 ...