属性	说明
clientLeft	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位
clientHeight	返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位

2、获取client代码


//获取元素client宽高
 
<div>我是内容．．．</div>
<style>．．．（省略了样式代码）</style>
<script>
  var div = document.querySelector('div');
  console.log(div.clientHeight);console.log(div.clientTop);
  console.log(div.clientLeft);
</script>

二、元素滚动scroll

1、scroll概述

scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。

属性	说明
scrollLeft	返回被卷去的左侧距离，返回数值不带单位
scrollTop	返回被卷去的上方距离，返回数值不带单位
scrollWidth	返回自身的宽度，不含边框。注意返回数值不带单位
scrollHeight	返回自身的高度，不含边框。注意返回数值不带单位

2、固定侧边栏

案例分析：


//HTML结构代码
<div class="header w">头部区域</div>
    <div class="banner w">banner 区域</div>
    <div class="main w">主体区域</div>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>


//js功能代码
 //1.获取元素
        var header = document.querySelector('.header');
        var banner = document.querySelector('.banner');
        var slider = document.querySelector('.slider-bar');
        var goBack = document.querySelector('.goBack');
        //2.给goback注册click事件
        goBack.addEventListener('click',function(){
            window.scroll(0,0)
        })
        //3.给整个页面绑定scrool事件
        document.addEventListener('scroll',function(){
            //3.1获取页面顶部和左侧卷起的距离
            slider.style.top=window.pageYOffset;
            if(window.pageYOffset>(header.scrollHeight+banner.scrollHeight+30)){
                  goBack.style.display = 'block';
                slider.style.display='block';
                slider.style.position='fixed';
                slider.style.left='85%';
              
            }
            else{
                slider.position='absolute';
                slider.style.left='85%';
                  slider.style.top =( header.scrollHeight + banner.scrollHeight + 30)+'px';
                  goBack.style.display='none';
            }
        })


// css样式代码
 
<style>
        .w {
            width: 70%;
            margin: 0 auto;
            margin-top: 10px;
        }
 
        .header {
            height: 100px;
            background-color: orange;
        }
 
        .banner {
            height: 100px;
            background-color: paleturquoise;
        }
 
        .main {
            height: 1267px;
            background-color: rgb(68, 236, 132);
        }
 
        .slider-bar {
            width: 70px;
            height: 200px;
            background-color: rgb(236, 236, 81);
            position: absolute;
            left: 85%;
            top: 330px;
        }
 
        .goBack {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>

案例效果查看：刷新浏览器页面，当页面移动到主体部分时，浏览器预览效果。

三、三大系列总结

1、三大系列大小对比

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clienttWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身的实际宽度、不含边框、返回数值不带单位

2、主要用法

1. offset系列经常用于获得元素位置 offsetLeft offsetTop

2. client 经常用于获取元素大小 clientWidth clientHeight

3. scroll 经常用于获取滚动距离 scrollTop scrollLeft

4. 注意页面滚动的距离通过 window.pageXOffset 获

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/295362