• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript offsetParent案例详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute  relative fixed),如果其父元素中不存在定位则offsetParent为:body元     素

2. 根据定义分别存在以下几种情况

  1. 元素自身有fixed定位,父元素不存在定位,则offsetParent的结果为null(firefox中为:body,其他浏览器返回为null)
  2. 元素自身无fixed定位,且父元素也不存在定位,offsetParent为<body>元素
  3. 元素自身无fixed定位,且父元素存在定位,offsetParent为离自身最近且经过定位的父元素
  4. <body>元素的offsetParent是null
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
 <div id="test1" style="position:fixed"></div>
 
 <div id="test2"></div>
 
 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>    
    </div>    
</div>
 
<script>
    /*
    【1】元素自身有fixed定位,父元素不存在定位,则offsetParent的结果为null(firefox中为:body,其他浏览器返回为null)
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】元素自身无fixed定位,且父元素也不存在定位,offsetParent为<body>元素
    */
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】元素自身无fixed定位,且父元素也不存在定位,offsetParent为<body>元素
    */
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】<body>元素的offsetParent是null
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null
 
</script>
</body>
 
</html>

3. IE7中对于定位的offsetParent,存在以下bug

【1】当元素本身经过绝对定位或相对定位,且父级元素无经过定位的元素时,IE7-浏览器下,offsetParent是<html>

<div id="test1" style="position:absolute;"></div>    
<script>
//IE7-浏览器返回<html>,其他浏览器返回<body>
console.log(test1.offsetParent);
</script>
<div id="test2" style="position:relative;"></div>    
<script>
//IE7-浏览器返回<html>,其他浏览器返回<body>
console.log(test2.offsetParent);
</script>
<div id="test3" style="position:fixed;"></div>    
<script>
//firefox并没有考虑固定定位的问题,返回<body>,其他浏览器都返回null
console.log(test3.offsetParent);
</script>

【2】如果父级元素存在触发haslayout的元素或经过定位的元素,且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素

<div id="div0" style="display:inline-block;">
    <div id='test'></div>    
</div>
<script>
//IE7-浏览器返回<div id="div0">,其他浏览器返回<body>
console.log(test.offsetParent);
</script>
<div id="div0" style="position:absolute;">
    <div id="div1" style="display:inline-block;">
        <div id='test'></div>    
    </div>    
</div>
<script>
//IE7-浏览器返回<div id="div1">,其他浏览器返回<div id="div0">
console.log(test.offsetParent);
</script>
<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='test'></div>    
    </div>    
</div>
<script>
//所有浏览器都返回<div id="div1">
console.log(test.offsetParent);
</script>

到此这篇关于JavaScript offsetParent案例详解的文章就介绍到这了,更多相关JavaScript offsetParent内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
webpack实现静态资源缓存的方法发布时间:2022-02-05
下一篇:
vue中v-model指令与.sync修饰符的区别详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap