- 浏览: 1434208 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
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; }
发表评论
-
continuation, cps
2013-09-12 16:49 2717起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3345一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14017cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5285目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4930最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6340css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7289promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2771closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2852首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6381兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3169背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2896如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2789简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2792场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2205分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6944作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2680html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2417这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2232深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3196场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
Offset
0624.CC11xx Sensitivity versus Frequency Offset and Crystalswra122c[1].pdf cc1310
Excel的offset函数基础教程,从零开始哦
kafka tool offset explorer 2.2
Sample Adaptive Offset in the HEVC Standard
an algorithm to offset a polyline, the same funtion you can see in AutoCAD, command offset.
1.between and方法 2.offset xx rows fetch next xx rows only方法
教你学会OFFSET函数
offset函数高级使用方法,是中高级人员使用必学的一些常用技巧。
offset函数
看了这个offset,保证你会用offset了以后..offset精品教程!!
比较器仿真必用,详细的仿真过程,以及EDA软件的充分介绍。
offset kafka监控工具 免费 支持windows等
采集传感器参数,读取数据,压力与温度,数据处理串口输出
offset()函数使用方法,这里有几个例子,可以看一下就非常明白这个用法了
OFFSET(reference,rows,cols,height,width) Reference 作为偏移量参照系的引用区域。Reference 必须为对单元格或相连单元格区域的引用;否则,函数 OFFSET 返回错误值 #VALUE!。 Rows 相对于偏移量参照系的左上角...
offset和address函数用法举例
小伙伴们好啊,今天老祝和大家一起来学习OFFSET函数的常用套路。 1、函数作用: 用于生成数据区域的引用,再将这个引用作为半成品,作为动态图表的数据源、或是作为其他函数的参数,进行二次加工。 2、函数用法: ...
这个工作表是一个用offset做的一个动态图表,其中用到offset函数,使图表达到动态效果,比一般图表好看不要太多,谢谢大家的支持
函数解释_OFFSET