`
yiminghe
  • 浏览: 1453296 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

offsetXx 探讨

IEFirefoxCSSJavaScriptXHTML 
阅读更多

offsetParent 作为 CSSOM 的一部分，在 IE,FIREFOX 中表现不一致性，因为这点区别很少用到，所以资料一般较少提及。

 

offsetTop,offsetLeft 等 IE,FIREFOX 是通用的，只不过相对的 offsetParent 不同。


updated : 09-05-20


offsetTop firefox ie 并不太相同，


offsetTop firefox 为 从子元素 的顶 padding edge 相对 offsetParent border 底的值


offsetTop ie为 从子元素 的顶border 相对 offsetParent padding 底 的值


updated :2010-11-25


offsetParent 等属性详细可参见 CSSOM规范 。offsetLeft，offsetTop 也可查阅这里 。

 

因此才有了这一段通用的求页面绝对坐标的方法。(大概，推荐是避免使用该方法 )

 

while (p) {

                x += p.offsetLeft;
                y += p.offsetTop;
                p = p.offsetParent;
            }

 

另外在设置一个任意定位元素到指定页面绝对坐标时，offset 系列属性也起到了不小的作用。详见： 简析 Ext.Element.setXY() 机理

 

这篇文章探讨一下，ie firefox 下面 offsetParent 的不同之处。

 

假设当前元素为 el

 

1.position : relative ,

 

offsetParent 为它的已定位父元素，即 el.parent('*{position!=static}')，IE FIREFOX 通用，区别是 firefox offsetParent 最多到 body 结点，而 IE 到 html 结点。

 

2.position: absolute ,

 

offsetParent 为它的已定位父元素。即 el.parent('*{position!=static}')，这时 el.offsetTop == el.style.top (若 设置了 el.style.top)，IE FIREFOX 通用，区别是 firefox offsetParent 最多到 body 结点，而 IE 到 html 结点。


3.position : static || ''

 

  3.1 FIREFOX offsetParent 为它的已定位父元素，即 el.parent('*{position!=static}') ，最多查找到 body。


  3.2 IE offsetParent 为它的具有 layout 的父元素或者已定位父元素，即 el.parent('*{position!=static} ||   layout')，注意 layout 为 ie 的 私有属性，详见: On having layout ，这时最多查找到 body 结点 而不是 html 结点。


PS:一点备忘


ie offsetParent 有的情况下为 html，但是计算 offsetTop 时是从 body 开始计算的，并且 body 和 html 在 ie 中相差 1 像素，即使 html,body {margin:0;padding:0;} 。

 

实验代码 ：

 

注意 i_am_relative6

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" id='HTML'>
<head>
<title>探索offsetParent</title>
</head>
<body id='my_body'>
	

	<div id='i_am_relative' style='position:relative'>
		
		
		<div  id='i_am_noposition_parent' style='zoom:1'> 
			
			<div id='i_am_absolute' style='position:absolute;top:100px;'>
				haha , i am absolute
		</div>
		</div>
	</div>
	
	
	<div id='i_am_relative21' style='position:relative'>
		
		
		<div  id='i_am_noposition_parent22'> 
			
			<div id='i_am_absolute23' style='position:absolute;top:100px;'>
				haha , i am absolute
		</div>
		</div>
	</div>
	
	
	
	<div id='i_am_relative2' style='position:relative'>
		
		
		<div  id='i_am_noposition_parent2'> 
			
			<div id='i_am_noposition'>
				haha , i am noposition
		</div>
		</div>
	</div>
	
	
	
	<div id='i_am_relative3' style='position:relative'>
		
		
		<div  id='i_am_absolute3' style='position:absolute;'> 
			
			<div id='i_am_absolute4' style='position:absolute;top:200px;'>
				haha , i am absolute4
		</div>
		</div>
	</div>
	

	<div id='i_am_relative5' >
			
		<div  id='i_am_not_relative5' style='width:100px;height:100px;border:1px solid green;overflow:hidden;float:left;'> 
			
			<div id='i_am_relative6' style='position:relative;top:100px;'>
				haha , i am relative6
			</div>
		
		
		</div>
		
		
	</div>
	
	
	
	<div id='i_am_nothing9' >
		
		
		<div  id='i_am_nothing8' style='zoom:1;width:100px;height:100px;'> 
			
			<div id='i_am_nothing7' >
				haha , i_am_nothing7
			</div>
		
		
		</div>
		
		
	</div>
	
	
	
	<div id='i_am_nothing10' >
		
		
		<div  id='i_am_nothing11'> 
			
			<div id='i_am_nothing12' >
				haha , i_am_nothing12
			</div>
		
		
		</div>
		
		
	</div>
	
	
	<script type='text/javascript'>
		
		
		function off(el){
			el=document.getElementById(el);
			return el.id+' position:'+ el.style.position+'\n\n offsetParent :'+el.offsetParent+'\n offsetParent id:'+
			(el.offsetParent&&el.offsetParent.id)+'\n'
			+' offsetTop:'+el.offsetTop+'\n offsetParent position:'+(el.offsetParent&&el.offsetParent.style.position)+'\n\n parentNode :'+el.parentNode+'\n parentNode id:'
			+el.parentNode.id+'\n parentNode position:'+el.parentNode.style.position;
		}
		
		
		
		window.onload=function(){
		alert(off('my_body'));
		alert(off('i_am_absolute'));
		
		alert(off('i_am_absolute23'));
		
		alert(off('i_am_noposition'));
		alert(off('i_am_absolute4'));
		
		
		alert(off('i_am_relative6'));
	
		alert(off('i_am_nothing7'));
		
		alert(off('i_am_nothing12'));
		
	};
		</script>
</body>
</html>

 

ps: 一篇比较好的分析

http://www.cnblogs.com/rainman/archive/2009/02/15/1391056.html


在学习offset的相关属性前，必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值（例如，返回12，而不是'12px'）。
定位父元素 ： 指在CSS中某一元素domElement[position:relative/absolute] 所相对定位的元素。

1、offsetParent

　　 对于offsetParent来讲，最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。

　　 a、domElement设置了position:relative/absolute属性：
　　 　　 domElement.offsetParent指向的是该元素的定位父元素。

　　 　　 但也有一个bug，见一下代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#target{ position:relative; }
</style>
<script type="text/javascript">
window.onload = function(){
    var target = document.getElementById('target');
    alert(target.offsetParent == document.documentElement);        //IE中指向<html>元素
    alert(target.offsetParent == document.body);    //FF、Safari等指向<body>元素
};
</script>
</head>

<body>
<div id="outer" class="test">
    <div id="inner">
        <div id="target" class="test">Target<br />rainman</div>
    </div>
</div>
</body>
</html>
 

b、domElement没有设置position:relative/absolute，即static：

　　 　　 这一点所有的浏览器基本相同，domElement的offsetParent指向的是离domElement最近的拥有 position:relative/absolute属性的父级元素。若不存在，则指向 <body>元素。但这种情况也有例外，如果domElement是<td>则 offsetparent 指向<table>

　　 c、关于offsetParent的实例：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#outer { position:absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
    var target = document.getElementById('target');
    var outer = document.getElementById('outer');
    alert(target.offsetParent == outer);    //true
};
</script>
</head>

<body>
<div id="outer" class="test">
    <div id="inner">
        <div id="target" class="test">Target<br />rainman</div>
    </div>
</div>
</body>
</html>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
    var target = document.getElementById('target');
    alert(target.offsetParent == document.body);    //true
};
</script>
</head>

<body>
<div id="outer" class="test">
    <div id="inner">
        <div id="target" class="test">Target<br />rainman</div>
    </div>
</div>
</body>
</html>
 

2、offsetLeft/Top

offsetLeft： 该元素左border的左边缘  到  该元素的offsetParent的左border内边缘的水平距离。

offsetTop：该元素的上border的上边缘  到  该元素的offsetParent的上border内边缘的垂直距离。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.test{
    padding:5px;
    margin:10px;
    color:#fff;
    border:7px solid #000;
    background-color:#CC66FF;
}
#target{
    position:absolute;
    left:3px;
    top:9px;
    width:100px;
    height:100px;
}
#outer{
    position:relative;
    width:300px;
    height:300px;    
}
</style>
<script type="text/javascript">

window.onload = function(){
    var target = document.getElementById('target');
    alert(target.offsetLeft);    //13 = margin-10px + left-3px
};
</script>
</head>

<body>
<div id="outer" class="test">
    <div id="inner">
        <div id="target" class="test">Target<br />rainman</div>
    </div>
</div>
</body>
</html>

 

3、offsetWidth/offsetHeight

　　 给出元素在页面中占据的宽度和高度的总计。注意：把元素的边框和滚动条计算在内。

　　 offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;

　　 offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width; 

4、相关应用

a、获得一个元素的实际宽度和高度 ，例如：一个自适应高度的段落，往往可以通过获得该元素CSS层叠后的最终高度【见下代码】，但是这种方法在IE中有时返回的是auto，所以使用一个元素的offsetWidth/offsetHeight是比较理想的方法。

 

function getStyle(elem , type){
    var typeface = '';
    if(elem.currentStyle)
        typeface = elem.currentStyle[type];
    else if(window.getComputedStyle)
        typeface = window.getComputedStyle(elem , null)[type];
    return typeface;        
}

 

 

获得一个元素位置的可移植的方法：在窗口中的位置

 

function getX(elem){
    var x = 0;
    while(elem){
        x = x + elem.offsetLeft;
        elem = elem.offsetParent;
    }
    return x;
}
function getY(elem){
    var y = 0;
    while(elem){
        y = y + elem.offsetTop;
        elem = elem.offsetParent;
    }
    return y;
}
分享到：
| CalendarLite 轻量级的Ext 日历
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    0624.CC11xx Sensitivity versus Frequency Offset and Crystalswra122c[1]

    ### CC11xx Sensitivity Versus Frequency Offset and Crystal Accuracy #### 概述 设计文档DN005SWRA122C（以下简称“该文档”）深入探讨了CC11xx系列芯片（包括CC1100、CC1100E、CC1101、CC1110、CC1111等）在...

    SQLite Sql语法参考手册

    本参考手册将深入探讨SQLite的SQL语法，帮助开发者更好地理解和使用这一强大的数据库系统。 一、SQL基础 SQL（Structured Query Language）是用于管理关系数据库的标准语言，包括数据查询、数据操纵、数据定义和...

    jsp分页技术

    3. 用户体验：提供清晰的分页指示，如“共xx页，第xx页”，以及上一页、下一页和跳转到指定页的功能。 总结，JSP分页技术是Web开发中的常用技巧，它通过数据库查询和前端渲染相结合的方式，有效地解决了大数据量...

    分页显示效果

    以下是对分页显示这一主题的详细探讨： 1. **分页原理**： 分页的基本思想是将大量数据分为若干个较小的部分（页），每次只加载一页的数据到客户端，用户可以通过导航元素（如数字链接或“上一页”、“下一页”...

    VC操作Excel插入行

    本文将深入探讨如何使用VC++来实现Excel插入行的功能。 首先，为了在VC++中与Excel交互，我们需要引入Excel的相关库。这通常涉及到在项目设置中添加对`Microsoft Excel XX.x Object Library`的引用，其中XX.x代表你...

    Redis操作命令总结

    本篇文章将深入探讨Redis中的操作命令，包括键的查询、字符串类型的操作、链表操作以及更多其他数据结构的处理。 一、键的查询与管理 1. 模糊查询key：Redis支持使用通配符`*`、`?`和`[]`进行模糊查询，方便查找...

    Oracle与SQL数据库的基本知识

    本文将深入探讨这两个系统的基础知识，特别是Oracle数据库的管理和SQL查询语句。 首先，我们来看一下Oracle数据库的一些基本操作。在Oracle中，我们可以使用SQL命令来设置输出格式，例如`set lines 150`用于设置每...

    IBM-PC汇编语言程序设计课后答案

    - 示例：`MOV AX, RR ADD AX, 9R+9 MOVBX, XX ADDBX, 6X+6 ADDAX, BX R+9+(X+6)` - 解析：这一系列指令涉及复杂的数学运算，包括加法、减法等。 通过以上各章节的学习，我们可以更深入地理解IBM-PC汇编语言中的...

    EXCEL实战技巧精萃_函数篇04_统计求和技巧下

    本篇主要探讨的是统计求和技巧的下部分，这些技巧对于提高工作效率至关重要。在实际工作中，我们经常会遇到各种复杂的求和需求，例如条件求和、动态求和等。下面将详细阐述几个关键的统计求和知识点。 1. SUM函数：...

    api-standard:前后端数据交互规范

    本文将深入探讨"api-standard:前后端数据交互规范"，并基于提供的文件名"api-standard-master"展开讨论。 1. **API设计原则**： - 可预测性：接口应当有明确且一致的命名规则，使得开发者能够根据接口名推断其功能...

    Linux C函数参考 文件操作篇

    本篇将详细探讨Linux C函数在文件操作方面的应用。 1. 打开与关闭文件： - `fopen()`函数用于打开文件，返回一个指向`FILE`类型的指针，用于后续的读写操作。例如：`FILE* fp = fopen("filename", "r");`，"r"表示...

    restApi

    本篇文章将深入探讨RESTful API的设计原则、核心概念以及JavaScript在实现RESTful API中的应用。 ### RESTful API设计基础 1. **资源（Resource）**：在RESTful API中，一切皆资源。资源是通过URI（Uniform ...

Magicbox
Global site tag (gtag.js) - Google Analytics