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" 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>,其他瀏覽器都返回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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript實現簡易放大鏡最全代碼解析(ES5)
- javascript實現倒計時關閉廣告
- JavaScript實現簡單的拖拽效果
- JavaScript仿淘寶實現固定右側側邊欄
- JavaScript offset實現鼠標坐標獲取和窗口內模塊拖動