1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed
1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元 素
2. 根据定义分别存在以下几种情况
<!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>
var test1 = document.getElementById('test1');
console.log('test1 offsetParent: ' + test1.offsetParent);
var test2 = document.getElementById('test2');
console.log('test2 offsetParent: ' + test2.offsetParent);
var test3 = document.getElementById('test3');
console.log('test3 offsetParent: ' + test3.offsetParent);
*/
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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: JavaScript offsetParent案例详解
本文链接: https://www.lsjlt.com/news/133204.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0