一、元素内大小
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外不包含边框。