1、線上鏈接地址

瀏覽器坐標(biāo)屬性

2、screen系列?

2.1、screenX：

鼠標(biāo)位置相對(duì)于用戶屏幕水平偏移量

2.2、screenY：

鼠標(biāo)位置相對(duì)于用戶屏幕垂直偏移量

3、client系列

3.1、clientX:

鼠標(biāo)位置相對(duì)于文檔的左邊距（不隨頁(yè)面滾動(dòng)而改變）

3.2、clientY:

鼠標(biāo)位置相對(duì)于文檔的上邊距（不隨頁(yè)面滾動(dòng)而改變）

3.3、clientHeight:

表示元素節(jié)點(diǎn)的 CSS 高度（單位像素），只對(duì)塊級(jí)元素生效，對(duì)于行內(nèi)元素返回0。如果塊級(jí)元素沒(méi)有設(shè)置 CSS 高度，則返回實(shí)際高度

clientHeight = height + padding

3.4、clientWidth：

表示元素節(jié)點(diǎn)的 CSS 寬度（單位像素），只對(duì)塊級(jí)元素有效，對(duì)于行內(nèi)元素返回0。也是只包括元素本身的寬度和padding，如果有垂直滾動(dòng)條，還要減去垂直滾動(dòng)條的寬度

clientWidth = width + padding

3.5、clientLeft:

元素節(jié)點(diǎn)左邊框（left border）的寬度（單位像素），不包括左側(cè)的padding和margin。如果沒(méi)有設(shè)置左邊框，或者是行內(nèi)元素（display: inline），該屬性返回0

3.6、clientTop:

元素節(jié)點(diǎn)頂部邊框的寬度（單位像素），不包括頂部的padding和margin。如果沒(méi)有設(shè)置上邊框，或者是行內(nèi)元素（display: inline），該屬性返回0

4、scroll系列

4.1、scrollWidth:

獲取元素整個(gè)內(nèi)容的寬度 （包含看不見(jiàn)的） ，如果有滾動(dòng)條（滾動(dòng)條會(huì)占用部分寬高），不計(jì)算滾動(dòng)條的寬高

4.2、scrollHeight:

獲取元素整個(gè)內(nèi)容的高度 （包含看不見(jiàn)的） ，如果有滾動(dòng)條（滾動(dòng)條會(huì)占用部分寬高），不計(jì)算滾動(dòng)條的寬高

4.3、scrollTop(可讀寫):

表示當(dāng)前元素的垂直滾動(dòng)條向下側(cè)滾動(dòng)的像素?cái)?shù)量

4.4、crollLeft(可讀寫):

表示當(dāng)前元素的滾動(dòng)水平滾動(dòng)條向右的像素?cái)?shù)量

判斷滾動(dòng)條垂直是否滾動(dòng)到底 垂直滾動(dòng)條 scrollHeight -scrollTop = clientHeight

判斷滾動(dòng)條水平是否滾動(dòng)到底 水平滾動(dòng)條 scrollWidth -scrollLeft = clientWidth

5、offset系列

5.1、offsetX:

鼠標(biāo)位置相對(duì)被觸發(fā)dom的左上角的水平距離，以內(nèi)容區(qū)左上角為基準(zhǔn)點(diǎn)（不包括邊框），如果觸發(fā)點(diǎn)在邊框上會(huì)返回負(fù)值

5.2、offsetY:

鼠標(biāo)位置相對(duì)被觸發(fā)dom的左上角的垂直距離，以內(nèi)容區(qū)左上角為基準(zhǔn)點(diǎn)（不包括邊框），如果觸發(fā)點(diǎn)在邊框上會(huì)返回負(fù)值

5.3、offsetHeight:

表示元素的 CSS 垂直高度（單位像素），包括元素本身的高度、padding 和 border，以及水平滾動(dòng)條的高度（如果存在滾動(dòng)條）, 如果元素的 CSS 設(shè)為不可見(jiàn)（比如display: none;），則返回0

offsetHeight = height + border + padding

5.4、offsetWidth:

表示元素的 CSS 水平寬度（單位像素），包括元素本身的寬度、padding 和 border，以及垂直滾動(dòng)條的寬度（如果存在滾動(dòng)條）, 如果元素的 CSS 設(shè)為不可見(jiàn)（比如display: none;），則返回0

offsetWidth = width + border + padding

5.5、offsetParent:

返回最靠近當(dāng)前元素的、并且 CSS 的position屬性不等于static的上層元素

5.6、offsetLeft:

當(dāng)前元素和定位父元素之間的偏移量（如果沒(méi)有設(shè)置定位父元素，就是相對(duì)于左上角的位置,left是最左邊的距離）

5.7、offsetTop:

當(dāng)前元素和定位父元素之間的偏移量（如果沒(méi)有設(shè)置定位父元素，就是相對(duì)于左上角的位置,top是距離頂部的距離）

6、其他

注意：當(dāng)瀏覽器body出現(xiàn)滾動(dòng)條時(shí)，pageY和clientY才不一致！

6.1、pageX:

鼠標(biāo)位置相對(duì)于文檔的左邊距（隨頁(yè)面滾動(dòng)而改變）

e.pageX = e.clientX + e.target.scrollLeft;

6.2、pageY:

鼠標(biāo)位置相對(duì)于文檔的上邊距（隨頁(yè)面滾動(dòng)而改變）

e.pageY = e.clientY + e.target.scrollTop;

6.3、layerX:

有定位屬性的父元素的左上角的水平距離（自身有定位屬性的話就是相對(duì)于自身），都沒(méi)有的話，就是相對(duì)于body的左上角（包含邊框）

6.4、layerY:

有定位屬性的父元素的左上角的垂直距離（自身有定位屬性的話就是相對(duì)于自身），都沒(méi)有的話，就是相對(duì)于body的左上角（包含邊框）

6.5、getBoundingClientRect:

用于獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗(可視范圍)的位置

getBoundingClientRect方法的所有屬性，都把邊框（border屬性）算作元素的一部分

• x：元素左上角相對(duì)于視口的橫坐標(biāo)
• y：元素左上角相對(duì)于視口的縱坐標(biāo)
• height：元素高度
• width：元素寬度
• left：元素左上角相對(duì)于視口的橫坐標(biāo)，與x屬性相等
• right：元素右邊界相對(duì)于左邊視口的橫坐標(biāo)（等于x + width）
• top：元素頂部相對(duì)于視口的縱坐標(biāo)，與y屬性相等
• bottom：元素底部相對(duì)于上邊視口的縱坐標(biāo)（等于y + height）