JavaScript offsetTop
dom屬性的使用都非常簡單,難點在於如何真正理解屬性的實質。
首先從名稱入手,offsetTop由如下兩個單詞構成:
(1).offset:具有偏移量的意思。
(2).top:具有頂部的意思。
此屬性的功能確實名副其實,它返回當前元素頂部相對指定元素頂部的偏移量。
這個指定元素由當前元素的offsetParent屬性確定。
圖示如下:
offsetParent屬性返回值簡單介紹如下:
(1).返回距離當前元素最近的採用定位祖先元素。
(2).如果祖先元素中沒有采用定位的元素,則返回body元素。
IE7瀏覽器中,offsetParent返回值是距離它最近的父元素,有相容需求的注意一下。
更多內容參閱JavaScript offsetParent一章節。
特別說明:offsetTop是隻讀屬性。
瀏覽器支援:
(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"> *{margin:0px;padding:0px;} body{padding:20px;margin:30px;} #box{width:300px;height:210px;background:green;margin:20px;} #middle{width:200px;height:160px;background:blue;overflow:hidden;} #inner{width:50px;height:50px;background:#ccc;line-height:50px;margin:80px;} </style> <script> window.onload=function(){ let inner=document.getElementById("inner"); inner.innerHTML=inner.offsetTop; } </script> </head> <body> <div id="box"> <div id="middle"> <div id="inner"></div> </div> </div> </body> </html>
上述程式碼可以獲取inner的offsetTop屬性值。
程式碼分析如下:
(1).inner沒有具有定位的祖先元素,那麼inner的offsetParent返回body元素。
(2).那麼offsetTop屬性返回值就是inner頂部距離body頂部的偏移量。
(3).offsetTop=80(inner.margin-top)+20(box.margin-top)+20(body.padding-top)+30(body.margin-top)。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{margin:0px;padding:0px;} body{padding:20px;margin:30px;} #box{ width:300px; height:210px; background:green; margin:20px; overflow:hidden; position:relative; } #middle{width:200px;height:160px;background:blue;margin:20px;overflow:hidden;} #inner{width:50px;height:50px;background:#ccc;line-height:50px;margin:80px;} </style> <script> window.onload=function(){ let inner=document.getElementById("inner"); inner.innerHTML=inner.offsetTop; } </script> </head> <body> <div id="box"> <div id="middle"> <div id="inner"></div> </div> </div> </body> </html>
上述程式碼可以獲取inner的offsetTop屬性值。
程式碼分析如下:
(1).inner的祖先元素中,box採用定位,那麼inner的offsetParent返回inner元素。
(2).那麼offsetTop屬性返回值就是inner頂部距離inner頂部的偏移量。
(3).offsetTop=80(inner.margin-top)+20(box.margin-top)。
相關文章
- offsetParent、offsetLeft/offsetTop深度剖析
- offsetLeft offsetTop // DOM操作,之寫入內容
- offsetTop屬性值不受padding的影響padding
- 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