空间坐标详解

最新推荐文章于 2024-02-03 15:45:40 发布

langmanboy

最新推荐文章于 2024-02-03 15:45:40 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/langmanboy/article/details/124177503

版权

本文详细解析了前端开发中的空间坐标概念，包括视口与文档尺寸、几何尺寸、几何属性方法、元素坐标获取及滚动控制。重点介绍了offsetParent、getBoundingClientRect等方法，并阐述了坐标理解及元素定位原理。

摘要由CSDN通过智能技术生成

空间坐标

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

最低0.47元/天解锁文章

langmanboy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
空间坐标详解

空间坐标1. 视口与文档尺寸1-1 浏览器可视区域网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸视口尺寸不包括浏览器工具条、菜单、标签、状态栏等当你打开控制台后，视口尺寸就相应变小了position 使用文档定位，fixed 使用视口定位文档坐标在页面滚动时不发生改变，视口坐标的操作需要考虑滚动条的位置1-2 浏览器视口尺寸获取文档（document）可视区域不包括滚动部分在内的宽度和高度document.documentElement.client
复制链接

扫一扫

专栏目录