浅谈AJAX中的Tooltip偏移量——offset

现在大家上网,看到好多网站上,鼠标放到图片,他的相应信息出现在他的左侧或右侧。这就是AJAX的tooltip(关于tooltip的例子,此处不列举了)。而其中控制新的提示div位置的用到的就是offset。

其中包括offsetWidth,offsetHeight,offsetLeft,offsetTop及offsetParent。前四个很好理解。本次主要谈谈offsetParent。offset是偏移量不是绝对位置。主要看对象所在的容器,而我们要制作弹出的tooltip,他是在我们的表格的左侧或右侧外显示的,没有覆盖原有的element。left和right很好控制,主要在top的位置。而其中就用到offsetParent。

 

offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null 

就是说我们的标签无论嵌套了几层,如:

 

<body >

<h1 id="Grandfather">

<div id="parent">

<p id="sonObj">测试OffsetParent属性</p>

</div>

</h1>

 

</body>

我们现在取到sonObj对象,sonObj.offsetParnet的偏移量是谁的呢?

Parent是父亲的意思,哪个对象呢。parents or grandfather

如果要实验的话我们会看到,他取的是body对象,为什么呢???

对象在调用offsetParent的时候,如果他的父节点中样式表没有设置他的盒子(即,left,top,width,position,border之类的,把对象用框起来)。他会直接取body。如果他的父节点中有样式表,记住是父节点。此时offsetParent取到的对象才是父类对象。

希望这点东西可以帮助你看懂AJAX的tooltip例子!!

 

 

 

 

http://blog.sina.com.cn/s/blog_4e024a300100c3gb.html

你可能感兴趣的:(tooltip)