JavaScript offsetParent案例詳解
阿新 • • 發佈：2021-08-23
1. offsetParent定義：那麼ofhttp://www.cppcns.comfsetParent就是距離該子元素最近的進行過定位的父元素（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>
<www.cppcns.comdiv 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，其他瀏覽器返回為nu 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>
到此這篇關於 offsetParent案例詳解的文章就介紹到這了,更多相關Script offsetParent內容請搜尋我www.cppcns.com們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！