JavaScript-offset家族

最新推荐文章于 2024-03-21 17:42:38 发布

可可鸭~

最新推荐文章于 2024-03-21 17:42:38 发布

阅读量1k

点赞数

分类专栏： JavaScript学习文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_43547255/article/details/121678183

版权

JavaScript学习专栏收录该内容

26 篇文章 4 订阅

订阅专栏

JavaScript-offset家族

一、初识offset

JS 有一套方便获取元素尺寸的办法，那就是offset家族。

    var d1 = document.querySelector(".d1");
    console.log([d1])
//放在数组中可以输出当前元素的属性

在这里插入图片描述

在这里插入图片描述
1.offsetHeight ，offsetWidth

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .d1{
            width: 100px;
            height: 100px;
            border: 20px solid rgb(226, 103, 222);
            margin: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <script>
    var d1 = document.querySelector(".d1");
    console.log([d1])
    console.log([d1.offsetWidth])
    console.log([d1.offsetHeight])
    //offsetWidth = content + border + padding
    </script>
</body>
</html>

在这里插入图片描述
与margin没有关系。

2.offsetLeft、offsetTop、offsetRight、offsetBottom

offsetLeft为例

offsetLeft 返回距离上级盒子；如果父级都没有定位，则以浏览器为准。在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下两种情况说明：（测试所用的浏览器版本为：Chrome94.0.4606.54， Firefox94.0.2 ）

1.如果父元素是body，不设置position属性时

在Chrome中offsetLeft是元素边框外侧到浏览器窗口内侧的距离offsetLeft = 浏览器窗口——元素的外边框。

样式表

        body{
            border:20px solid #4169e1;
            padding: 20px;
        }
        .d1{
            width: 100px;
            height: 100px;
            border: 20px solid rgb(226, 103, 222);
            margin: 10px;
            padding: 20px;
        }/*10+20+20*/

在这里插入图片描述

在这里插入图片描述完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        body{
            border:20px solid #4169e1;
            padding: 20px;
        }
        .d1{
            width: 100px;
            height: 100px;
            border: 20px solid rgb(226, 103, 222);
            margin: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <script>

    var d1 = document.querySelector(".d1");
    var body = document.querySelector("body");
    console.log([body.offsetLeft])
    console.log([d1])
    console.log([d1.offsetLeft])
    //offsetWidth = content + border + padding
    </script>
</body>
</html>

在firefox浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离减去body中边框值的大小

css

     body{
            border:20px solid #4169e1;
            padding: 20px;
        }
        .d1{
            width: 100px;
            height: 100px;
            border: 20px solid rgb(226, 103, 222);
            margin: 10px;
            padding: 20px;
        }

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        body{
            border:20px solid #4169e1;
            position: relative;
            padding: 20px;
        }
        .d1{
            width: 100px;
            height: 100px;
            border: 20px solid rgb(226, 103, 222);
            margin: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <script>
    var d1 = document.querySelector(".d1");
    console.log([d1])
    console.log([d1.offsetLeft])
    //offsetWidth = content + border + padding
    </script>
</body>
</html>

2.如果父元素是body且body设置了position属性

css

   body{
            position: relative;
            border:20px solid #4169e1;
            padding: 20px;
        }
        .d1{
            width: 100px;
            height: 100px;
            border: 20px solid rgb(226, 103, 222);
            margin: 10px;
            padding: 20px;
        }

在这里插入图片描述完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            position: relative;
            border:20px solid #4169e1;
            padding: 20px;
        }
        .d1{
            width: 100px;
            height: 100px;
            border: 20px solid rgb(226, 103, 222);
            margin: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <script>

    var d1 = document.querySelector(".d1");
    var body = document.querySelector("body");
    console.log([body.offsetLeft])
    console.log([d1])
    console.log([d1.offsetLeft])
    //offsetWidth = content + border + padding
    </script>
</body>
</html>

2.如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。
在这里插入图片描述

    *{
            margin: 0;
            padding: 0;
        }
      .control {
        width: 200px;
        height: 200px;
        position: relative;
        background-color: aquamarine;
      }
      .d1 {
        width: 100px;
        height: 100px;
        border: 20px solid rgb(226, 103, 222);
        margin: 10px;
        padding: 20px;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      .control {
        width: 200px;
        height: 200px;
        position: relative;
        background-color: aquamarine;
      }
      .d1 {
        width: 100px;
        height: 100px;
        border: 20px solid rgb(226, 103, 222);
        margin: 10px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="control">
      <div class="d1"></div>
    </div>

    <script>
      var d1 = document.querySelector(".d1");
      console.log([d1]);
      console.log([d1.offsetLeft]);
      //offsetWidth = content + border + padding
    </script>
  </body>
</html>