本篇内容主要讲解“JavaScript下offsetParent的定义及用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript下offsetParent的定义及用法”吧!
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" ></div>
<div id="test2"></div>
<div id="div0" >
<div id="div1" >
<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" ></div> <script> //IE7-浏览器返回<html>，其他浏览器返回<body> console.log(test1.offsetParent); </script>
<div id="test2" ></div> <script> //IE7-浏览器返回<html>，其他浏览器返回<body> console.log(test2.offsetParent); </script>
<div id="test3" ></div> <script> //firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null console.log(test3.offsetParent); </script>
【2】如果父级元素存在触发haslayout的元素或经过定位的元素，且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素
<div id="div0" > <div id='test'></div> </div> <script> //IE7-浏览器返回<div id="div0">，其他浏览器返回<body> console.log(test.offsetParent); </script>
<div id="div0" > <div id="div1" > <div id='test'></div> </div> </div> <script> //IE7-浏览器返回<div id="div1">，其他浏览器返回<div id="div0"> console.log(test.offsetParent); </script>
<div id="div0" > <div id="div1" > <div id='test'></div> </div> </div> <script> //所有浏览器都返回<div id="div1"> console.log(test.offsetParent); </script>
到此，相信大家对“JavaScript下offsetParent的定义及用法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
