JS offsetparent 问题

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 /*position: relative;*/
 9             }
10             #div1{
11                 width: 100px;
12                 height: 200px;
13                 background: red;
14                 /*position: relative;*/
15                 /*margin-top: 10px;*/
16             }
17             #div2{
18                 width: 50px;
19                 height: 100px;
20                 background: green;
21
22             }
23         </style>
24     </head>
25     <body>
26         <div id="box">
27             <div id="div1">
28                 <div id="div2">
29
30                 </div>
31             </div>
32         </div>
33
34     </body>
35
36     <script type="text/javascript">
37         var div2 = document.getElementById("div2");
38
39         // offsetparent  寻找的是离他最近的父节点(要求:使用了定位),否则他会获取根节点
40
41         console.log(div2.offsetParent);
42     </script>
43 </html>
时间: 2024-11-05 22:43:29

JS offsetparent 问题的相关文章

JS OffsetParent属性

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

HTML精确定位之位置参数乱炖一锅

一.前言 公司项目,需要在一个图片的右上角放置一个类似“X”的东西(其实是需要显示一个数字,就像微信一样,在右上角显示几个消息),然后需要用到html的定位,看了几个网上的例子,恍惚间看到了一个offset,好奇心驱使,去查了一下html的offset,居然“拔出萝卜带出泥”(理解字面意思就行),居然搂出一箩筐的东西,不深究一下心里直痒痒(好奇心害死猫~),所以网上到处查,但是看来看去,刚看出一点眉目,别人评论我看的文章说“说的不对,误人子弟”,自此网上陷入“罗生门”,没办法,只能挽起裤脚,脱掉

DOM操作HTML元素属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作HTML元素属性</title> </head> <body> <ul> <li></li> <li></li> <li></li> <

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

JS之parentNode与offsetParent

JS中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,element.parentNode,获取某一个元素的父节点,这里的父节点呢,只有一个,就是指的是最临近的直接父节点.比如我们经常会有这样的需求:一个列表,点击删除删除一列,如下: <ul id="list"> <li>我是沐晴<span>删除</spa

js原生offsetParent解析

offsetParent是个只读属性,返回最近显示指定位置的容器元素的引用.如果元素没有指定位置,最近的元素或者根元素(标准模式下是html,怪异模式下是body)就是offsetParent.当元素的style.display='none'时,offsetParent返回null.由于offsetTop和offsetLeft是相对于页边距,因此offsetParent是非常有用的. 浏览器兼容性 在以WebKit为核心的浏览器上,如果元素是隐藏的(该元素或者上级元素style.display=

js的offsetWidth,clientWidth及offsetParent

js元素的offsetWidth与clientWidth很相似,因此放在一起记录. 1.clientWidth与offsetWidth clientWidth=元素内容区域宽度+水平内边距padding. offsetWidth=元素的内容区域宽度+水平内边距padding+边框的宽度. 因此,可以认为: offsetWidth=clientWidth+边框宽度. 通过实例验证下: <div style="width:500px;height:300px;background-color:

js中offsetLeft,offsetTop,offsetParent计算边距方法

封装一个函数获得任一元素在页面的位置 var GetPosition= function (obj) { var left = 0; var top = 0; while(obj.offsetParent)//如果obj的有最近的父级定位元素就继续 { left += obj.offsetLeft;//累加 top += obj.offsetTop; obj=obj.offsetParent;//更新obj,继续判断新的obj是否还有父级定位,然后继续累加 } return {“left”:le

js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置position为absolute或relative),则offsetParent为根目录: 2)当元素的父元素没有进行css定位,则offsetParent取最近的已经定位的元素: 3)当元素的父元素进行了css定位,则offsetParent为父元素: 2.offsetLeft,offsetTop 在IE中: