獲取元素大小,螢幕大小
一、元素內大小
clientWidth=元素的寬度+元素padding-left+ 元素padding-right
* :不包含margin和border
clientHeight=元素的高度+元素padding-top+ 元素padding-bottom
* :不包含margin和border
clientLeft=border的寬度
* :不包含margin和padding
clientLeft=border的高度
* :不包含margin和padding
二、元素外大小
offsetWidth
元素的寬度+padding-left+padding-right+boder
* :不包括margin
offsetHeight
元素的高度+padding-top+padding-bottom+boder
*:不包括margin
offsetTop
父類容器沒有定位屬性: 子類的border邊緣算起+子類margin+父類margin+父類padding+父類border
父類容器有定位屬性: 子類的border邊緣算起+子類margin+父類padding
offsetLfet
父類容器沒有定位屬性: 子類的border邊緣算起+子類margin+父類margin+父類padding+父類border
父類容器有定位屬性: 子類的border邊緣算起+子類margin+父類padding
offsetParent
找父類節點
a:如果父類的display屬性值為none,則返回null;
b:如果父類沒有定位屬性,則繼續往上找,直到body
c:如果父類有定位屬性,則返回父類節點
1:獲取瀏覽器的寬高(不包括工具欄滾動條)
(1.1):適用於ie9以上其他瀏覽器
window.innerWidth
window.innerHeight
(1.2):適用於ie9以上瀏覽器
document.documentElement.clientWidth
document.documentElement.clientHeight
(1.3):獲取body的寬高
document.body.clientWidth
document.body.clientHeight
2:Window的screen物件
目的:獲取螢幕的寬和高
window.screen.availWidth
window.screen.availHeight
詳情見:https://blog.csdn.net/qq_39019768/article/details/80489970
screenX/Y:滑鼠位置相對於螢幕的座標
pageX/Y:相對於文件邊緣(包含滾動條距離)
clientX/Y:相對於當前頁面且不包含滾動條距離
offsetX/Y:相對於當前元素(塊或行內塊),除safari外不包含邊框。