计算元素的位置

傷城~ 2022-12-04 06:29 166阅读 0赞

元素位置的计算主要是一个相对的概念, 相对于父级元素, 相对于父级定位元素, 相对于body等.

所以元素分为了定位元素(position: 不是static)和普通元素(postion: static)

滚动元素是普通元素的一种, 由于父级元素框架限制, 而内容溢出导致的

首先说一下屏幕, window.screen返回的对象就是你的屏幕信息参数

{
        availHeight: 834,
        availLeft: 0,
        availTop: 0,
        availWidth: 1536,
        height: 864,
        width: 1536,
        colorDepth: 24,  // 颜色深度, 这是css兼容要求的最大值
        pixelDepth: 24,  // 屏幕的位深度/色彩深度, 这是css兼容要求的最大值
        orientation: {
            angel: 0,  // 屏幕的旋转角度
            // 一般分为四种: 
            // 正常("landscape-primary"), 
            // 顺时针或逆时针旋转90°("portrait-primary", "portrait-secondary"), 
            // 旋转180°("landscape-secondary")
            type: "landscape-primary"
        }
    }

带有avail前缀的是不包含半永久或永久界面的(比如window的底部任务栏), 所以可以看到availHeight比height低就是因为少了任务栏. availLeft和availTop指的是左上角的坐标参数(这也是不包含半永久或永久界面的), 如果把底部任务栏变成左侧任务栏, 结果就会产生变化.

上面也说过元素位置分成三种普通的、滚动的和定位的

所以有三种不同的前缀client、scroll和offset, 除了前缀之外基本有四个属性: height, width, left, top. offset多一个parent

<table> 
 <tbody> 
 <tr> 
 <td style="width:102px;"> clientHeight </td> 
 <td style="width:634px;"> 包含元素的内部高度,&nbsp;内边距,&nbsp;但不包括水平滚动条、边框和外边距 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> clientWidth </td> 
 <td style="width:634px;"> 包含元素的内部宽度,&nbsp;内边距,&nbsp;但不包括垂直滚动条、边框和外边距 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> clientLeft </td> 
 <td style="width:634px;"> 表示一个元素的左边框的宽度(border) </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> clientTop </td> 
 <td style="width:634px;"> 表示一个元素的顶部边框的宽度 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> scrollHeight </td> 
 <td style="width:634px;"> 元素内容的高度,&nbsp;内边距包括由于溢出导致的视图中不可见内容及伪元素的高度,&nbsp;但不包括水平滚动条、边框和外边距(等同于滚动到最底部的scrollTop + clientHeight) </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> scrollWidth </td> 
 <td style="width:634px;"> 元素内容的宽度,&nbsp;内边距包括由于溢出导致的视图中不可见内容及伪元素的宽度,&nbsp;但不包括垂直滚动条、边框和外边距(等同于滚动到最右边的scrollLeft + clientWidth) </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> scrollLeft </td> 
 <td style="width:634px;"> 读取或设置元素滚动条到元素左边的距离 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> scrollTop </td> 
 <td style="width:634px;"> 读取或设置元素滚动条到元素顶部的距离 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> offsetParent </td> 
 <td style="width:634px;"> 指向最近的包含该元素的定位元素(position不是static)或者最近的table,&nbsp;td,&nbsp;th,&nbsp;body元素 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> offsetHeight </td> 
 <td style="width:634px;"> 包含元素的高度,&nbsp;高度包括该元素的边框、内边距和元素的水平滚动条,&nbsp;不包含伪元素的高度 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> offsetWidth </td> 
 <td style="width:634px;"> 包含元素的宽度,&nbsp;宽度包括该元素的边框、内边距和元素的垂直滚动条,&nbsp;不包含伪元素的宽度 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> offsetLeft </td> 
 <td style="width:634px;"> 返回当前元素左上角相对于offsetParent节点的左边界偏移的像素值 </td> 
 </tr> 
 <tr> 
 <td style="width:102px;"> offsetTop </td> 
 <td style="width:634px;"> 返回当前元素左上角相对于offsetParent节点的顶部边界偏移的像素值 </td> 
 </tr> 
 </tbody> 
</table>

除了上面的属性来表示元素位置之外还有方法来获取元素位置:

getBoundingClientRect(): 返回元素的大小及其相对于视口的位置也就是相对于浏览器可视窗口的左上角的位置, 主要包含height, width, top, left, right, bottom. 其中height, width代表元素的高和宽(宽高包含内边距由box-sizing盒模型决定), bottom = top + height, right = left + width; 可以参考点击事件event对象中的clientX和clientY

这里提一下: document.documentElement返回的是文档对象的根元素(HTML中就是<html>标签), 就和document.body返回的是body标签一样.