關于元素大小位置、鼠標位置相關屬性的總結

Wildcard 發(fā)布于2019-08-02 10:46 / 904人閱讀

元素大小位置相關屬性的總結 clientXXX

clientLeft

clientTop

clientWidth 表示內容區(qū)域的寬度，包括padding大小，但是不包括邊框和滾動條

clientHeight 表示內容區(qū)域的高度，包括padding大小，但是不包括邊框和滾動條

一圖勝千言：

再線測試：https://codepen.io/zhaojianxi...

offsetXXX

offsetLeft

offsetTop

offsetWidth

offsetHeight

offsetParent 往上找非static的第一個定位元素

一圖勝千言：

在線測試地址：https://codepen.io/zhaojianxi...

scrollXXX

scrollLeft

scrollTop

scrollWidth

scrollHeight

一圖勝千言：

在線測試地址：https://codepen.io/zhaojianxi...

鼠標位置

clientX,clientY 相對于window的偏移量
offsetX, offsetY 相對于被點擊元素的偏移量
pageX, pageY 相對于document的偏移量
screenX, screenY 鼠標相對于顯示器屏幕的偏移坐標（由于是相對于屏幕的。所以在pc端沒太多使用場景）
x, y 相當于clientX，clientY

我的GitHub地址：https://github.com/JesseZhao1... 歡迎關注

GPU云服務器云服務器鼠標絕對位置鼠標指針位置 dom元素位置文件屬性信息位置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/52542.html

關于元素大小位置、鼠標位置相關屬性的總結

元素大小位置相關屬性的總結 clientXXX clientLeft clientTop clientWidth 表示內容區(qū)域的寬度，包括padding大小，但是不包括邊框和滾動條 clientHeight 表示內容區(qū)域的高度，包括padding大小，但是不包括邊框和滾動條一圖勝千言：showImg(https://segmentfault.com/img/remote/1460000015...

singerye 2019-08-22 18:14 評論0 收藏0
JavaScript學習總結（九）事件詳解

摘要：布爾值表示捕獲階段調用事件處理程序，表示冒泡階段通過對象的方法，也可以定義事件的回調函數。對象會被作為第一個參數傳遞給事件監(jiān)聽的回調函數。布爾默認值是，當設置成時用以取消事件的默認行為與中的相同。其實這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當時寫了一大堆，結果沒保存，覺得這個沒寫完是個不小的遺憾，今天正好有空，就給補充下了，也正好給我的javascript學習總結做...

LiveVideoStack 2019-08-21 10:21 評論0 收藏0
DOM元素位置，滾動位置和鼠標事件位置相關屬性函數總結

摘要：前言前段時間經常被這些參數搞混，在此總結一下，畫了一張圖，希望能對大家有所幫助相關元素的左邊距離可視窗口左邊的距離元素的右邊距離可視窗口左邊的距離元素的上邊距離可視窗口頂部的距離元素的下邊距離可視窗口頂部的距離元素的寬元素的高目前來看與相同前言：前段時間經常被這些參數搞混，在此總結一下，畫了一張圖，希望能對大家有所幫助 getBoundingClientRect相關 left 元素...

陳江龍 2019-08-21 17:35 評論0 收藏0
JavaScript 中那些關于坐標和距離的屬性與方法

摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對于當前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關方法返回一個對象，提供當前元素的大小位置等信息。摘自阮一峰教程四鼠標事件接口通過添加的事件所產生的事件對象也是實例。一前言在前端開發(fā)中總會遇到各種各樣需要使用或計算坐標和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現查，耗費不少...

jsummer 2019-08-26 13:57 評論0 收藏0
JavaScript 中那些關于坐標和距離的屬性與方法

摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對于當前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關方法返回一個對象，提供當前元素的大小位置等信息。摘自阮一峰教程四鼠標事件接口通過添加的事件所產生的事件對象也是實例。一前言在前端開發(fā)中總會遇到各種各樣需要使用或計算坐標和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現查，耗費不少時間精力...

guqiu 2019-05-27 17:42 評論0 收藏0