前端中与宽高有关的属性
一、window对象
(一)window.innerHeight
window.innerHeight ——浏览器窗口的视口（viewport）高度
window.innerWidth ——浏览器窗口的视口（viewport）宽度
(二)window.outerHeight
window.outerHeight ——整个浏览器窗口的高度
window.outerWidth——整个浏览器窗口的宽度
(三)window.pageXOffset
window.pageXOffset——表示页面滚动的像素值（水平方向）
window.pageYOffset——表示页面滚动的像素值（垂直方向）
window.scrollX——返回文档/页面水平方向滚动的像素值window.scrollY——返回文档/页面垂直方向滚动的像素值
二、screen对象
(一)screen.availWidth
screen.height //864
screen.availHeight //824
(二)screen.width
screen.width——返回屏幕的宽度screen.height——返回屏幕的高度
三、document对象
(一)document.elementFromPoint()
document.elementFromPoint()—— 函数返还在特定坐标点下的HTML元素数组
var elements = document.elementsFromPoint(x, y);
(二)Element.getBoundingClientRect()
Element.getBoundingClientRect()——返回元素的大小及其相对于视口的位置
#box {
background-color: rgb(105, 221, 241);
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid rgb(152, 238, 149);
margin: 20px;
}
console.log(box.getBoundingClientRect());
// {
// x: 20;
// y: 20;
// width: 260;
// height: 260;
// top: 20;
// right: 280;
// bottom: 280;
// left: 20;
// }
四、元素相关的属性
(一)element.clientLeft
element.clientLeft——表示的是一个元素左边框的宽度
- 只读的
- 内容溢出导致出现垂直滚动条，需要包含滚动条的宽度
- 不包括左外边距和左内边距
element.clientTop——表示的是一个元素顶部边框的宽度
(二)element.clientWidth
(三)element.offsetLeft
element.offsetLeft——表示相对于最近的祖先定位元素的左边界偏移量
- 只读属性
- 对块级元素来说，
offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框
element.offsetTop——表示相对于最近的祖先定位元素的顶部边界偏移量
(四)element.offsetWidth
element.offsetWidth——返回一个元素的布局宽度
- 只读属性
- 包含元素的
content、padding、border以及竖直方向滚动条
element.offsetHeight——返回一个元素的布局高度
element.scrollWidth——表示元素内容的全部宽度
- 只读属性
- 包括由于overflow溢出而在屏幕上不可见的内容
element.scrollHeight——表示元素内容的全部高度
- 包括由于overflow溢出而在屏幕上不可见的内容
element.scrollLeft——可以读取或设置元素滚动条到元素左边的距离
scrollLeft设置为0时，水平滚动条在最左边
element.scrollTop——可以获取或设置一个元素的内容垂直滚动的像素数
- 元素的内容没有产生垂直方向的滚动条，
scrollTop 值为0
element.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});
element.scrollBy()——可以使元素滚动一段特定距离
五、鼠标相关属性
(一)clientX/clientY
MouseEvent.clientX ——鼠标指针相对于内部窗口(viewport)的左偏移量
MouseEvent.clientY ——鼠标指针相对于内部窗口(viewport)的顶部偏移量
(二)offsetX/offsetY
MouseEvent.offsetX ——鼠标指针相对于目标节点内边位置(padding)的X坐标
- 点击元素
border左上角，offsetX为负值的border-left-width
MouseEvent.offsetY ——鼠标指针相对于目标节点内边位置的Y坐标
(三)pageX/pageY
MouseEvent.pageX——鼠标指针相对于整个文档的X坐标
- 鼠标相对于
document的坐标，其会随着页面滚动而改变
MouseEvent.pageY——鼠标指针相对于整个文档的Y坐标
(四)screenX/screenY
screenX——鼠标指针相对于全局（屏幕）的X坐标screenY——鼠标指针相对于全局（屏幕）的Y坐标
(五)x/y
MouseEvent.x ——MouseEvent.clientX的别名MouseEvent.y——MouseEvent.clientY的别名
(六)layerX/layerY
MouseEvent.layerX ——其获取的是触发点相对于被点击元素的距离
