JavaScript offsetParent
offsetParent可以返回一個元素物件,只讀屬性。
根據上下文條件的不同,返回的元素也會不同,區分如下:
(1).如果祖先元素中具有定位元素,此屬性返回距離它最近的定位元素。
(2).如果祖先元素中沒有定位元素,那麼返回最近的table、td、th或者body元素。
此屬性通常與offsetTop與offsetLeft屬性配合使用。
語法結構:
[JavaScript] 純文字檢視 複製程式碼element.offsetParent
瀏覽器支援:
(1).IE瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).opera瀏覽器支援此屬性。
(5).火狐瀏覽器支援此屬性。
(6).safria瀏覽器支援此屬性。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{width:300px;height:200px;position:relative;background:red;} #middle{width:200px;height:100px;background:blue;} #inner{width:50px;height:50px;background:green;line-height:50px;} </style> <script> window.onload=function(){ let inner=document.getElementById("inner"); inner.innerHTML=inner.offsetParent.id; } </script> </head> <body> <div id="box"> <div id="middle"> <div id="inner"></div> </div> </div> </body> </html>
上述程式碼可以獲取inner元素的offsetParent屬性值。
程式碼分析如下:
(1).inner祖先元素中,box元素採用相對定位。
(2).那麼inner的offsetParent屬性返回值就是box元素。
(3).所以最終將box元素的id屬性值寫入inner元素。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{width:300px;height:200px;background:red;} #middle{width:200px;height:100px;background:blue;} #inner{width:120px;height:50px;background:green;line-height:50px;} </style> <script> window.onload=function(){ let inner=document.getElementById("inner"); inner.innerHTML=inner.offsetParent.id; } </script> </head> <body id="ant"> <div id="box"> <div id="middle"> <div id="inner"></div> </div> </div> </body> </html>
在上面程式碼中,inner元素沒有定位祖先元素。
所以inner的offsetParent屬性返回值就是body元素,最終將body的id寫入inner。
相關文章
- jQuery offsetParent()jQuery
- offsetParent、offsetLeft/offsetTop深度剖析
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- 【JavaScript學習】JavaScript物件建立JavaScript物件
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- [Javascript] How javascript read the property?JavaScript
- JavaScript -"this"JavaScript
- javascript ??JavaScript
- This in JavaScriptJavaScript
- “This” is For JavaScriptJavaScript
- javascript thisJavaScript
- JavaScriptJavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- 【轉向JavaScript系列】AST in Modern JavaScriptJavaScriptAST
- javascript,還是javascript的問題JavaScript
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- 《深入理解JavaScript》——2.3 JavaScript有用嗎JavaScript
- 【JavaScript】--JavaScript總結一覽無餘JavaScript
- 【HTML、JAVASCRIPT、CSS】3、Javascript基本概念HTMLJavaScriptCSS
- [Javascript] Understanding JavaScript Proxies with Symbol.toPrimitiveJavaScriptSymbolMIT
- JavaScript EventJavaScript
- JavaScript BackdoorJavaScript
- JavaScript normalize()JavaScriptORM
- JavaScript setDate()JavaScript
- JavaScript setMinutes()JavaScript
- JavaScript getDate()JavaScript
- JavaScript setHours()JavaScript
- JavaScript setUTCMinutes()JavaScript
- JavaScript setUTCHours()JavaScript
- JavaScript setUTCFullYear()JavaScript
- JavaScript setUTCMonth()JavaScript
- JavaScript setUTCDate()JavaScript
- JavaScript getUTCMinutes()JavaScript
- JavaScript setMonth()JavaScript
- JavaScript getMonth()JavaScript
- JavaScript getMinutes()JavaScript