溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
