空间坐标
1. 视口与文档尺寸
1-1 浏览器可视区域
- 网页很多都是多屏(通过滚动条显示看不见的内容),所以文档尺寸一般大于视口尺寸
- 视口尺寸不包括浏览器工具条、菜单、标签、状态栏等
- 当你打开控制台后,视口尺寸就相应变小了
position
使用文档定位,fixed
使用视口定位- 文档坐标在页面滚动时不发生改变,视口坐标的操作需要考虑滚动条的位置
1-2 浏览器视口尺寸
获取文档(document)可视区域不包括滚动部分在内的宽度和高度
document.documentElement.clientWith
获取文档可视区域的宽度document.documentElement.clientHeight
获取文档可视区域的高度
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
包括浏览器滚动部分在内的宽度与高度
window.innerWidth
获取文档可视区域的宽度(包含滚动条)window.innerHeight
获取文档可视区域的高度(包含滚动条)
console.log(window.innerWidth)
console.log(window.innerHeight)
2. 几何尺寸
元素在页面中拥有多个描述几何数值的尺寸,下面截图进行了形象的描述
3. 几何属性方法列表
方法 | 说明 | 备注 |
element.getBoundingClientRect |
返回元素在视口坐标及元素大小,包括外边距,width/height与offsetWidth/offsetHeight匹配 | 窗口坐标 |
element.getClientRects |
行级元素每行尺寸位置组成的数组 | |
element.offsetParent |
拥有定位属性的父级,或body/td/th/table | 对于隐藏元素/body/html值为null |
element.offsetWidth |
元素宽度尺寸,包括内边距与边框和滚动条 | |
element.offsetHeight |
元素高度尺寸,包括内边距与边框和滚动条 | |
element.offsetLeft |
相对于祖先元素的X轴坐标 | |
element.offsetTop |
相对于祖先元素的Y轴坐标 | |
element.clientWidth |
元素宽度,不包含边框,只包含内容和内边距,行元素尺寸为0 | |
element.clientHeight |
元素高度,不包含边框,只包含内容和内边距,行元素尺寸为0 | |
element.clientLeft |
内容距离外部的距离,滚动条在左侧时包括滚动条尺寸 | |
element.clientTop |
内容距离顶部的距离,滚动条在顶部时包括滚动条尺寸 | |
element.scrollWidth |
元素宽度,内容+内边距+内容溢出的尺寸 | |
element.scrollHeight |
元素高度,内容+内边距+内容溢出的尺寸 | |
element.scrollLeft |
水平滚动条左侧已经滚动的宽度 | |
element.scrollTop |
垂直滚动条顶部已经滚动的高度 |
3-1 offsetParent & offsetLeft/Top
-
offsetparent
获取一个指向最近的拥有定位属性的祖先元素-
position
为absolute
,relative
或fixed
-
或
<td>
,<th>
,<table>
、<body>
-
对于
<body>
与<html>
或者当元素的style.display
设置为none
时,offsetParent
返回null
-
-
offsetleft
提供相对于offsetParent
祖先元素左上角的X
坐标 -
offsetTop
提供相对于offsetParent
祖先元素左上角的Y
坐标
<style>
.container {
position: relative;
}
.box {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: #8467e0;
}
</style>
<div class="container">
<div class="box"></div>
</div>
<script>
// 获取该元素最近的包含定位属性的祖先元素
let elem = document.querySelector('.box')
console.log(elem.offsetParent);
// <div class="container"><div class="box"></div></div>
// 获取与祖先元素x轴 y轴的坐标
console.log(elem.offsetLeft, elem.offsetTop); // 20 20
</script>
3-2 offsetWidth/Height
offsetWidth
获取元素的宽度尺寸,包括内边距与边框滚动条offsetWidth = width + padding + border + 滚动条
offsetHeight
获取元的高度尺寸,包括内边距与边框滚动条offsetHeight = height + padding + border + 滚动条
<style>
.box {
width: 100px;
height: 100px;
border: 10px solid #2ccb7a;
background-color: #8467e0;
padding: 10px;
overflow: auto;
}
</style>
<div class="box"></div>
<script>
// 获取元素宽度高度
// 宽度 = width + padding + border + 滚动条
let box = document.querySelector('.box')
console.log(box.offsetWidth); // 140
// 高度 = height + padding + border + 滚动条
console.log(box.offsetHeight); // 140
</script>
3-3 clientTop/Left
clientTop
获取内容距离顶部的距离,滚动条在顶部时包括滚动条尺寸clientTop = border + 滚动条
clientLeft
获取内容距离外部的距离,滚动条在左侧时包括滚动条尺寸clientLeft = border + 滚动条
<style