js如何獲取元素在頁面中的位置
本章節通過程式碼例項介紹一下如何利用javascript獲取一個元素在頁面中的位置。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0px; padding:0px; } #antzone{ width:200px; height:100px; background:#CCC; margin:200px; } </style> <script type="text/javascript"> function showpane(id) { var self = document.getElementById(id); var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft; var top = self.getBoundingClientRect().top + document.documentElement.scrollTop; var obj={}; obj.left=left; obj.top=top; return obj; } window.onload=function(){ var odiv=document.getElementById("antzone"); var obj=showpane("antzone"); odiv.innerHTML="x:"+obj.left+"y:"+obj.top } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面程式碼實現了我們的要求,程式碼比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).getBoundingClientRect()方法可以參閱js getBoundingClientRect()一章節。
(2).scrollLeft屬性可以參閱js scrollLeft一章節。
(3).innerHTML屬性可以參閱js innerHTML一章節。
相關文章
- 用 js 獲取頁面元素的位置圖文總結JS
- 獲取元素在頁面中的座標位置程式碼例項
- getBoundingClientRect方法獲取元素在頁面中的相對位置GCclient
- js獲取元素在頁面中的座標程式碼例項JS
- JavaScript獲取元素在陣列中的位置JavaScript陣列
- js管理頁面元素位置大小JS
- js獲取操作iframe子頁面中元素JS
- js獲取頁面dom元素的幾種常用方式JS
- javascript獲取滑鼠指標在整個頁面中的座標位置JavaScript指標
- 獲取棧中任意位置的元素
- javascript獲取當前li元素在集合中的位置JavaScript
- js如何獲取指定元素在陣列中個數JS陣列
- 小程式獲取當前元素在螢幕中的位置
- js獲取頁面中所有元素程式碼例項JS
- Js獲取元素相對適口位置JS
- js獲取滑鼠在頁面中的座標簡單介紹JS
- js如何獲取指定陣列元素在陣列中的索引值JS陣列索引
- JavaScript 獲取div在頁面中座標JavaScript
- jquery如何獲取指定元素在陣列中第一次出現的位置jQuery陣列
- js如何獲取指定元素的尺寸JS
- appium 獲取混合頁面元素失敗APP
- js獲取元素的方法(獲取html元素的方法)JSHTML
- 獲取頁面中所有元素的節點型別型別
- js如何判斷頁面中是否存在某個元素JS
- jQuery如何獲取iframe中的元素jQuery
- 利用node.js獲取頁面中的所有超連結<a>Node.js
- 在cs頁面獲取input的值方法
- javascript如何獲取指定元素在陣列中的數目JavaScript陣列
- js如何獲取元素的高度和寬度JS
- 如何利用js獲取取得焦點的元素JS
- JavaScript獲取滑鼠在元素中的座標JavaScript
- jQuery在元素集合中獲取第N個元素jQuery
- JavaScript獲取當前li元素的索引位置JavaScript索引
- js如何獲取網頁的標題JS網頁
- iframe的操作-Js/Jquery獲取iframe中的元素JSjQuery
- JS 獲取文件元素JS
- 獲取當前元素在兄弟元素節點中的索引索引
- ThinkPHP 在頁面獲取當前時間PHP