JavaScript学习笔记——offset

最新推荐文章于 2023-07-05 15:40:48 发布

希魔王的塔罗牌

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量261

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Nozomi0609/article/details/108695315

版权

offset

js中有一套方便的获取元素尺寸的办法就是offset家族

offset包括：

offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent

offsetWidth 和 offsetHight

用于检测盒子自身的宽高+padding+border，不包括margin

offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;

这两个属性，他们绑定在了所有的节点元素上
获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            width: 200px;
            height: 300px;
            color: blue;
            border: 20px solid greenyellow;
            padding: 50px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="d1">
        Hello World
    </div>
    <script>
        var d1 = document.querySelector(".d1");
        console.log(d1.offsetWidth);
        //340 = 200 + 2*50 + 2*20
        console.log(d1.offsetHeight);
        //440 = 300 + 2*50 + 2*20
    </script>
</body>
</html>

在这里插入图片描述

offsetLeft 和 offsetTop

返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以浏览器为准

 offsetLeft：
	获取自身左外边框到定位父级的左内边框的距离
offsetTop：
	获取自身上外边框到定位父级的上内边框的距离

只能获取不能修改

也就是：
offsetLeft、offsetTop： 父元素的内边距 + 元素的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .d1{
            width: 200px;
            height: 300px;
            color: blue;
            border: 10px solid greenyellow;
            padding: 40px;
            margin: 20px;
            position: relative;
        }

        .d2{
            width: 50px;
            height: 100px;
            border: blueviolet solid 10px;
            margin: 30px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">123</div>
    </div>
    <script>
        var d1 = document.querySelector(".d1");
        var d2 = document.querySelector(".d2")
        console.log(d2.offsetLeft);
        //70 = 40 + 30
        console.log([d1]);
    </script>
</body>
</html>

在这里插入图片描述

offsetParent

检测父系盒子中带有定位的父盒子节点
返回结果是该对象的父级（带有定位）

如果当前元素的父级元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为body
如果当前元素的父级元素，有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为最近的那个父级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <div class="d3">123</div>
        </div>
    </div>
    <div class="d4">
        <div class="d5"></div>
    </div>
    <script>
        var d3 = document.querySelector(".d3");
        var d5 = document.querySelector(".d5");
        console.log(d3.offsetParent);
        console.log(d5.offsetParent);
    </script>
</body>
</html>

在这里插入图片描述

offsetLeft和style.left区别

offsetLeft 可以返回没有定位盒子的距离左侧的位置
如果父系盒子中都没有定位，以body为准
style.left 只能获取行内式，如果没有，则返回""（意思是，返回空）
offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。

div.offsetLeft = 100;
div.style.left = "100px";

offsetLeft 和 offsetTop 只读，不可修改；
而 style.left 和 style.top 可读写
如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串

总结

用offsetLeft 和 offsetTop 获取值

用style.left 和 style.top 赋值（比较方便）

希魔王的塔罗牌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记——offset

offsetjs中有一套方便的获取元素尺寸的办法就是offset家族offset包括：offsetWidthoffsetHightoffsetLeftoffsetTopoffsetParentoffsetWidth 和 offsetHight用于检测盒子自身的宽高+padding+border，不包括marginoffsetWidth = width + padding + border;offsetHeight = Height + padding + border;这两个属
复制链接

扫一扫