JS獲取元素在頁面的位置

2022-05-06 09:39:12 字數 1043 閱讀 4559

js獲取元素的offsettop,offsetleft等屬性

obj.clientwidth //獲取元素的寬度(width+padding)

obj.clientheight //元素的高度

obj.offsetleft //元素相對于父元素的left

obj.offsettop //元素相對于父元素的top

obj.offsetwidth //元素的寬度(width+padding+border)

obj.offsetheight //元素的高度

//獲取元素的縱座標(相對於視窗)

function gettop(e)

//獲取元素的橫座標(相對於視窗)

function getleft(e)

上面的方法無疑影響效能,好在瀏覽器給我提供了相應的介面getboundingclientrect,這個方法最早出現在ie瀏覽器中,後來的瀏覽器也跟著支援了這個方法,而且還更加完善,ie中只能獲取到元素的left,top,bottom,right的屬性,而後面的現代瀏覽器還能獲取到元素的width和height.

chrome

firefox (gecko)

internet explorer

opera

safari

1.03.0 (1.9)

4.0(yes)

4.0這裡要注意的是,bottom是元素底部相對於視窗頂部的距離,而不是像css裡面position的bottom相對於視窗底部,同理,rihgt屬性是元素最右邊相對於視窗左邊的距離。

var box = document.getelementbyid("box");

var pos = box.getboundingclientrect();

box.innerhtml = "top:"+pos.top +

"left:"+pos.left +

"bottom:"+pos.bottom +

"right:"+pos.right +

"width:"+pos.width +

"height:"+pos.height

獲取頁面元素位置

最近在嘗試乙個東西的時候,再次碰到需要獲取元素的位置,這次還是自己來整理一下。offset 一類的屬性有 offsettop offsetleft offsetwidth offsetheight。scroll 一類屬性有 scrollleft scrolltop var sleft element...

獲取php頁面上的元素,js獲取元素在頁面的位置

很多時候,我們需要獲取元素在頁面的位置 我們需要明白的是 元素在頁面的位置 該元素相對瀏覽器視窗的位置 瀏覽器滾動條的值 我們可以先用getboundingclientrect 方法來獲得某個元素相對瀏覽器視窗的位置 這個方法返回的是乙個物件,即object,該物件具有4個屬性 top,left,r...

js 獲取url引數值,滑鼠點選在頁面的位置

1.獲取url引數值 function getquerystring name 呼叫 alert getquerystring 引數名1 alert getquerystring 引數名2 方法二 function getrequest return therequest 呼叫 var reques...