关于页面元素的宽高属性的三大家族(offset、scroll、client)

本文链接：https://blog.youkuaiyun.com/weixin_40630195/article/details/122143482

本文详细介绍了网页布局中的offset、scroll和client家族，以及如何获取元素的宽高和位置。接着讨论了如何获取网页的滚动距离，并展示了如何实现固定导航栏和响应式布局。最后，通过电梯导航和手风琴效果的案例，深入探讨了网页交互的实现技巧，包括页面滚动跟随和元素展开收缩的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01-三大家族(offset、scroll、client)

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zw9ihXLj-1640414831672)(day05.assets/1554473815720-1637084942857.png)]

1.1-三大家族

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>标题</title>
    <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 : 获取自身真实宽高 = width + padding*2 + border*2
            offsetLeft/top : 元素自身 左/上 外边框 到 定位父级  左/下 内边框距离
        2.scroll家族 ： 获取 “元素内容”   的真实宽高与位置
            scrollWidth/scrollHeight :  获取元素‘内容’的宽高
            scrollLeft/scrollTop : 元素内容 左/上 滚动出去的距离
        3.client家族 ： 获取元素‘可视区域’的宽高与位置
            clientWidth/clientHeight : 获取元素‘可视区域’的宽高
            clientLeft/clientTop : 获取元素‘可视区域’的位置（左边框与右边框）
    
     三大家族特点
        (1)获取的是number类型
        (2)只能获取，不能设置
     */

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

      //1.offset家族 ： 获取 “元素自身”  的真实宽高与位置
      console.log(box.offsetWidth, box.offsetHeight) //150 + 10*2 + 10*2 = 190
      console.log(box.offsetLeft, box.offsetTop) //100 100

      //2.scroll家族 ： 获取 “元素内容”   的真实宽高与位置
      console.log(box.scrollWidth, box.scrollHeight)//153  398
      console.log(box.scrollLeft, box.scrollTop)//0  0  滚动条没有滚动就是0

      //3.获取元素‘可视区域’的宽高与位置
      console.log(box.clientWidth, box.clientHeight)//153 170 左边框与上边框宽度
      console.log(box.clientLeft, box.clientTop)//10 10 左边框与上边框宽度
    </script>
  </body>
</html>

1.2-获取网页滚动距离

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
     
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>
<body>


<script>
    /* 学习目标：获取网页滚动距离
            1.给网页注册滚动事件 :  window.onscroll
            2.获取网页滚动距离   ： document.documentElement.scrollLeft
    */

    //1.给页面注册滚动条事件
    window.onscroll = function(){
     
        //2.获取页面滚动距离 : html标签   
        console.log( document.documentElement.scrollLeft,document.documentElement.scrollTop );
    };
    
</script>
</body>
</html>

1.3-scroll案例：固定导航

需求分析：当页面的顶部区域滚动出去之后，页面的导航栏不再滚动，而是固定在顶部
思路分析：监听页面的滚动，当滚动距离超出顶部区域高度时，设置导航栏为fixed固定定位
- 通过改变类名即可改变样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
     
            margin: 0;
            padding: 0
        }

        img {
     
            vertical-align: top;
        }

        .main {
     
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
        }

        .fixed {
     
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>

<div class="top" id="topPart">
    <img id="pic" src="images/top.png" alt=""/>
</div>

<div class="nav" id="navBar">
    <img src="images/nav.png" alt=""/>
</div>

<div class="main" id="mainPart">
    <img src="images/main.png" alt=""/>
</div>

<script>
    /* 
    1.给页面注册滚动条事件 ： 监听垂直方向滚动距离
    2.获取当前滚动的scrollTop,如果超过指定范围就设置为固定导航
     */

    let topPart = document.querySelector('#topPart');
    let navBar = document.querySelector('#navBar');
    let mainPart = document.querySelector('#mainPart');

    //1.给页面注册滚动条事件
    window.onscroll = function(){
     
        //2.获取网页滚动距离
        let y = document.documentElement.scrollTop;
        if( y >= topPart.offsetHeight ){
     
            //设置nav为固定定位
            navBar.style.position = 'fixed';
            navBar.style.top = 0;
            /* 注意点：设置为固定定位之后，元素会脱标。下方盒子就会瞬间顶上来，造成顿闪现象
            解决方案：设置下方的元素的margin值，撑开脱标的高度
             */
             mainPart.style.marginTop = 10 + navBar.offsetHeight + 'px';
        }else{
     
            //设置nav为标准流
            navBar.style.position = 'static';
            //移除下方盒子脱标的margin
            mainPart.style.marginTop = '10px';
        };
    };
</script>
</body>
</html>

1.4-client案例：响应式布局

<!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>
</head>

<body>
    <script>
        
        /* 复习响应式布局原理
        1.响应式布局 ： 一个html同时适配多个不同设备
        2.响应式原理： 根据不同屏幕加载不同样式
            a.媒体查询
            b.client家族
        3.响应式布局练习
            设备       尺寸          样式
             大PC      >1200px        红 
             小PC      992-1200px     橙 
             平板      768-992px       黄 
             手机      <768px          绿 
         */

         //1.先给页面注册大小变化事件 ： 监听视口的变化
         window.onresize = function(){
     
            //2.获取当前视口尺寸
            let w = document.documentElement.clientWidth;
            let h = document.documentElement.clientHeight;
            console.log(w,h);
            

            if( w >= 1200 ){
     
                document.body.style.backgroundColor =