获取元素的尺寸和偏移量

最新推荐文章于 2024-07-08 12:11:04 发布

我是打工人

最新推荐文章于 2024-07-08 12:11:04 发布

阅读量520

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/szydqq/article/details/123332364

版权

1. 获取元素尺寸

1-1. offset 一套

=> 语法:

-> 元素.offsetWidth

-> 元素.offsetHeight

=> 得到: 元素内容 + padding + border 区域的尺寸

1-2. client 一套

=> 语法:

-> 元素.clientWidth

-> 元素.clientHeight

=> 得到: 元素内容 + padding 区域的尺寸

2. 获取元素偏移量

2-1. 偏移量参考元素

=> 语法: 元素.offsetParent

=> 得到: 元素的定位父级

2-2. offset 一套

=> 语法:

-> 元素.offsetLeft

-> 元素.offsetTop

=> 得到: 元素相对于 offsetParent 元素的偏移量

2-3. client 一套

=> 语法:

-> 元素.clientLeft

-> 元素.clientTop

=> 得到: 元素 (内容+padding)区域到元素 border 左上角的偏移量, 其实就是左边框和上边框宽度

获取元素尺寸(占地面积)

语法第一套:

=> 元素.offsetWidth

-> 获取的是元素内容 + padding + border 区域的宽度

=> 元素.offsetHeight

-> 获取的是元素内容 + padding + border 区域的高度

=> 注意: 不管盒子模型是什么, 区域不变

语法第二套:

=> 元素.clientWidth

-> 获取的是元素内容 + padding 区域的宽度

=> 元素.clientHeight

-> 获取的是元素内容 + padding 区域的高度

=> 注意: 不管盒子模型是什么, 区域不变

<!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;
    }

    div {
      width: 200px;
      height: 200px;
      padding: 20px;
      border: 20px solid #333;
      margin: 50px;
      background-color: skyblue;
      background-clip: content-box;

      /* box-sizing: border-box; */
    }
  </style>
</head>
<body>

  <div></div>

  <script>
    

    var ele = document.querySelector('div')

    // 1. offset 一套
    console.log('offsetWidth : ', ele.offsetWidth)
    console.log('offsetHeight : ', ele.offsetHeight)

    // 2. client 一套
    console.log('clientWidth : ', ele.clientWidth)
    console.log('clientHeight : ', ele.clientHeight)
  </script>
</body>
</html>

效果图：

获取元素偏移量

获取偏移量参考元素

+ 语法: 元素.offsetParent

+ 得到: 该元素的偏移量参考父级

-> 就是该元素的定位父级

-> 如果到 body 都没有定位父级, 那么这里的 offsetParent 就是 body 元素

语法第一套:

+ 语法:

=> 元素.offsetLeft

-> 获取元素相对于 offsetParent 的左侧距离

=> 元素.offsetTop

-> 获取元素相对于 offsetParent 的上方距离

语法第二套:

+ 语法:

=> 元素.clientLeft

-> 元素 (内容 + padding 区域) 相对于该元素 border 左边的尺寸

=> 元素.clientTop

-> 元素 (内容 + 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;
    }

    div {
      width: 500px;
      height: 500px;
      margin: 50px;
      background-color: skyblue;
      overflow: hidden;

      position: relative;

    }

    p {
      width: 300px;
      height: 300px;
      margin: 50px;
      background-color: orange;
      overflow: hidden;

      position: relative;
    }

    span {
      width: 100px;
      height: 100px;
      display: block;
      margin: 50px;
      background-color: pink;

      padding: 20px;

      border: 20px solid #333;

      border-top-width: 50px;
      border-left-width: 70px;
    }
  </style>
</head>
<body>

  <div>
    <p>
      <span></span>
    </p>
  </div>

  <script>
    
    var spanEle = document.querySelector('span')

    // 1. 获取偏移量参考元素
    console.log('offsetParent : ', spanEle.offsetParent)

    // 2. 语法第一套
    console.log('offsetLeft : ', spanEle.offsetLeft)
    console.log('offsetTop : ', spanEle.offsetTop)

    // 3. 语法第二套
    console.log('clientLeft : ', spanEle.clientLeft)
    console.log('clientTop : ', spanEle.clientTop)
  </script>
</body>
</html>