| 1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元 素 2. 根据定义分别存在以下几种情况 - 元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）
- 元素自身无fixed定位，且父元素也不存在定位，offsetParent为<body>元素
- 元素自身无fixed定位，且父元素存在定位，offsetParent为离自身最近且经过定位的父元素
- <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>，其他浏览器都返回nullconsole.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内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
webpack实现静态资源缓存的方法
vue中v-model指令与.sync修饰符的区别详解 |
