Web-api学习 11：元素偏移量 offset

玉安_ZhangDe

已于 2022-05-12 19:47:05 修改

阅读量301

点赞数

分类专栏： # web-api 文章标签：学习前端 javascript html5 开发语言

于 2022-05-12 19:46:46 首次发布

本文链接：https://blog.csdn.net/qq_47373340/article/details/124738251

版权

web-api 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

offset 概述

offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

案例：获取鼠标在盒子内的坐标

<head>
    <style>
        .box {
            margin: 100px auto;
            width: 300px;
            height: 300px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        var box = document.querySelector('.box');
        box.addEventListener('mouseover',function(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
        })
    </script>
</body>
</html>

offset 与 style 区别

offset

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适

style

style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

玉安_ZhangDe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web-api学习 11：元素偏移量 offset

offset 概述offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位案例：获取鼠标在盒子内的坐标<head> <style> .box { margin: 100px auto; width: 300..
复制链接

扫一扫

专栏目录