js 滑鼠 元素的距離屬性

2021-10-12 10:18:51 字數 895 閱讀 4118

offsettop //返回元素的上外緣距離最近採用定位父元素內壁的距離,如果父元素中沒有採用定位的,則是獲取上外邊緣距離文件內壁的距離。

所謂的定位就是position屬性值為relative、absolute或者fixed。返回值是乙個整數,單位是畫素。此屬性是唯讀的。
offsetleft //此屬性和offsettop的原理是一樣的,只不過方位不同,這裡就不多介紹了。

scrollleft //此屬性可以獲取或者設定物件的最左邊到物件在當前視窗顯示的範圍內的左邊的距離,也就是元素被滾動條向左拉動的距離。

返回值是乙個整數,單位是畫素。此屬性是可讀寫的。
scrolltop //此屬性可以獲取或者設定物件的最頂部到物件在當前視窗顯示的範圍內的頂邊的距離,也就是元素滾動條被向下拉動的距離。

返回值是乙個整數,單位是畫素。此屬性是可讀寫的。
當滑鼠事件發生時(不管是onclick,還是omousemove,onmouseover等)

clientx 滑鼠相對於瀏覽器(這裡說的是瀏覽器的有效區域)左上角x軸的座標; 不隨滾動條滾動而改變;

clienty 滑鼠相對於瀏覽器(這裡說的是瀏覽器的有效區域)左上角y軸的座標; 不隨滾動條滾動而改變;

pagex 滑鼠相對於瀏覽器(這裡說的是瀏覽器的有效區域)左上角x軸的座標; 隨滾動條滾動而改變;

pagey 滑鼠相對於瀏覽器(這裡說的是瀏覽器的有效區域)左上角y軸的座標; 隨滾動條滾動而改變;

screenx 滑鼠相對於顯示器螢幕左上角x軸的座標;

screeny 滑鼠相對於顯示器螢幕左上角y軸的座標;

offsetx 滑鼠相對於事件源左上角x軸的座標

offsety 滑鼠相對於事件源左上角y軸的座標

計算滑鼠至元素中心的距離

首先將乙個元素定位在當前頁面的中心位置 自適應 然後用mousemove 去監聽滑鼠,實時計算滑鼠當前位置到元素中心的距離。html head id text a id center box div body html css center box js function 現在計算函式準備好了,我們...

js 獲取當前元素距離視窗的距離

獲取dom到body左側和頂部的距離 getboundingclientrect 平時在寫js的時候,偶爾會需要用js來獲取當前div到 body 左側 頂部的距離。網上查一查,有很多都是通過offsettop offsetleft來計算出來的。我按照網上的查到的資料用了一次,算出來了一堆錯誤答案。...

JS魔法堂 關於元素位置和滑鼠位置的屬性

一 關於滑鼠位置的屬性 1.觸發滑鼠事件的區域 盒子模型中的border,padding,content區域會觸發滑鼠事件,點選margin區域將不觸發滑鼠事件。2.滑鼠事件物件mouseevent下的屬性 注意 1.ie5.5 8不支援該屬性,polyfill方法pagex clientx scr...