三大家族

最新推荐文章于 2024-11-02 12:42:04 发布

小崽子o

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量143

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_64352881/article/details/123860591

版权

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 150px;
        height: 150px;
        background-color: pink;
        overflow: auto;
        padding: 10px;
        border: 10px solid red;
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦
    </div>

    <script>
      /*三大家族 
      1.offset家族 :  获取 ‘自身’ 宽高和位置
        offsetWidth/offsetHeight : 自身的真实宽高与位置
        offsetLeft/offsetTop : 自身外边框 到定位父元素的 内边框距离

      2.scroll家族 ： 获取 ‘内容’  宽高和位置
        scrollWidth/scrollHeight : 获取 ‘内容’的宽高
        scrollLeft/scrollTop :  获取‘内容’的位置

      3.client家族 ： 获取 ‘可视区域’  宽高和位置
        clientWidth/clientHeight :   获取 可视区域 宽高
        clientLeft/clientTop : 获取 可视区域 位置 (就是左/上边框宽度)

      三大家族和样式操作区别：
        (1)获取的都是number类型
        (2)只能获取，不能修改
      */

       let box = document.querySelector('.box')

       //1.offsetWidth/offsetHeight : ‘自身’的真实宽高与位置 = content + padding + border
       console.log( box.offsetWidth,box.offsetHeight )//190 190
       //.offsetLeft/offsetTop : 自身外边框 到定位父元素的 内边框距离
       console.log( box.offsetLeft,box.offsetTop)//100 100

      //2.scrollWidth/scrollHeight : 获取 ‘内容’的宽高
      console.log( box.scrollWidth,box.scrollHeight )//153  398
      //scrollLeft/scrollTop : 获取‘内容’的位置。  滚动条滚动的距离。
      console.log( box.scrollLeft,box.scrollTop )// 0 0

      //3. clientWidth/clientHeight :   获取 可视区域 宽高
      console.log( box.clientWidth,box.clientHeight)//获取可视区域宽高
      console.log( box.clientLeft,box.clientTop)//获取可视区域位置  左/上边框宽度10,10
    </script>
  </body>