javascript獲取元素距離網頁頂部的距離
本章節分享一段程式碼例項,它實現了獲取元素距離網頁頂部距離的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding:0px; margin:0px; } #antzone { width:200px; height:100px; background:#ccc; margin-top:100px; margin-left:200px; text-align:center; line-height:100px; } </style> <script> window.onload = function () { function getDistanceOfLeft(obj) { var left = 0; var top = 0; while (obj) { left += obj.offsetLeft; top += obj.offsetTop; obj = obj.offsetParent; } return { left:left, top:top }; } var odiv = document.getElementById("antzone"); odiv.innerHTML = getDistanceOfLeft(odiv).top; } </script> </head> <body> <div id="antzone"></div> </body> </html>
本章節分享一段程式碼例項,它實現了獲取元素距離網頁頂部的距離。
一.程式碼註釋:
(1).window.onload = function () {},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).function getDistanceOfLeft(obj) {},引數是要獲取距離的元素物件。
(3).var left = 0,宣告一個變數並賦值為0,用來儲存元素距離網頁左端的距離。
(4).while (obj) {
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}通過迴圈方式,不斷判斷獲取元素距離上級元素頂端的距離,然後不斷累加。
(5).return {
left:left,
top:top
},返回一個物件,裡面儲存了元素距離網頁上部和左部的距離。
二.相關閱讀:
(1).offsetLeft可以參閱offsetleft屬性一章節。
(2).offsetParent可以參閱js offsetParent屬性一章節。
相關文章
- JavaScript獲取元素距離文件頂部的距離JavaScript
- JavaScript 元素距離視窗頂部的距離JavaScript
- jQuery獲取div距離視窗頂部或者父元素頂部的距離jQuery
- jQuery獲取網頁中的元素距離文件邊緣的距離程式碼例項jQuery網頁
- 獲取DOM元素到頁面頂部的距離,親測有效版本(轉載)
- 原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離JS瀏覽器
- vue js 獲取滾動距離 以及 返回頂部按鈕VueJS
- 最小距離分類器,互動式選取影像樣本分類資料,進行最小距離分類(實現歐式距離,馬氏距離,計程距離)
- 曼哈頓距離與切比雪夫距離的互化
- PostgreSQL遺傳學應用-矩陣相似距離計算(歐式距離,…XX距離)SQL矩陣
- 編輯距離及編輯距離演算法演算法
- 如何獲取向下滾動的距離
- Laravel 距離排序Laravel排序
- 透過經緯度計算距離獲取附近商家
- Vijos1680距離/openjudge2988計算字串的距離[DP]字串
- 距離度量學習
- js向下滾動一段距離出現返回頂部按鈕JS
- milvus 使用 l2 歐式距離計算向量的距離,計算出來的距離的最大值是多少?
- java 經緯度處理、計算兩地的距離、獲取當前一定距離以內的經緯度值Java
- 空間距離計算
- 中國網路消費信心:離爆表還有距離
- 獲取資料庫中到指定經緯度距離的座標資料庫
- 拖動滾動條一定距離可以固定於頂部的導航欄
- CSS3元素水平運動指定距離CSSS3
- eMarketer:定位廣告的距離問題
- 28、(向量)歐幾里得距離計算
- 洛谷 1279 字串距離字串
- RecyclerView滑動距離計算View
- 計算字串編輯距離字串
- 編輯距離演算法演算法
- 【谷歌面試題】求陣列中兩個元素的最小距離谷歌面試題陣列
- js獲取距離指定時間已經過去多久程式碼例項JS
- 求兩向量距離的CUDA實現
- 人際關係的八種距離
- ggplot2中繪圖設定x軸、y軸名稱距離框線的距離繪圖
- 【scipy 基礎】--正交距離迴歸
- 動態規劃-編輯距離動態規劃
- RQNOJ 514 字串距離:dp & 字串字串