DOM基础---offset系列、client系列、scroll系列

最新推荐文章于 2023-10-10 11:40:39 发布

曾不错吖

最新推荐文章于 2023-10-10 11:40:39 发布

阅读量303

点赞数

分类专栏： offset scroll client

本文链接：https://blog.youkuaiyun.com/sisuiban/article/details/119869785

版权

offset 同时被 3 个专栏收录

1 篇文章

订阅专栏

scroll

1 篇文章

订阅专栏

client

1 篇文章

订阅专栏

本文详细介绍了DOM中offset系列、scroll系列和client系列属性的用法，包括它们在获取元素位置、大小、滚动距离等方面的应用。offset系列用于获取元素相对于定位父元素的位置和大小，style只能获取行内样式；scroll系列关注元素的滚动距离和实际大小；client系列则提供元素可视区的大小信息，不包含边框。通过这些属性，开发者可以精确地操控网页元素。

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

offset系列、scroll系列、client系列的注意用法

offset系列经常用于获得元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得

offset系列

概述：使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

获得元素距离带有定位父元素的位置
获得元素自身大小

1.1常用属性

offset系列常用属性	作用
elem.offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位则返回Body
elem.offsetTop	返回元素相对带有定位父级元素上方的偏移
elem.offsetLeft	返回元素相对带有定位父元素左边框的偏移
elem.offsetWidth	返回自身包括padding,边框，内容区的宽度，返回值不带单位
elem.offsetHeight	返回自身包括padding，边看，内容区的高度，返回值不带单位

 <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回带有定位的父亲 否则返回的是body
        console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
    </script>

1.2 offset 与 style 的区别

offset	style
ofset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是不带单位的	style获得的数值是带单位的
offsetWidth包含padding,边框，width	style.width获得不包含padding和边框的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
想要获取元素大小位置，用offset合适	想要改变元素的值，用style改变

//获取鼠标在盒子内的坐标位置
<body>
    <div></div>
    <script>
        window.addEventListener('load',function(){
            var div = document.querySelector('div');
            div.addEventListener('mousemove',function(e){
                var x = e.pageX - this.offsetLeft + 'px';
                var y = e.pageY - this.offsetTop + 'px';
                this.innerHTML = 'X的坐标是' + x +';' + 'y的坐标是' + y;
            })
        })
    </script>
</body>

scroll系列

使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等

scroll系列属性	作用
element.scrollTop	返回被卷上去的上侧距离，返回的数值1不带单位
element.scrollLeft	返回被卷去的左侧距离，返回不带单位
elment.scrollWidth	返回自身实际的宽度，不包含边框，返回数值不带单位
element.scrollHeight	返回自身实际高度，不包含边框。返回数值不带单位

注意

元素被卷去的头部是:element.scrollTop。如果是页面被卷去的头部则是：window.pageYoffset

元素内容被卷走的高度	页面被卷走的高度
element.scrollTop	windiw.pageYoffset

代码演示

	<div class="slider-bar">
        <!-- 右边侧边栏 -->
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        window.addEventListener('load',function(){
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            var main = document.querySelector('.main')
            var goBack = document.querySelector('.goBack');

            // 获取 banner 距离顶部的 高度  offsetTop
            var bannerTop = banner.offsetTop;

            //获取 main 距离顶部的高度 
            var mainTop = main.offsetTop;

            //当侧边栏变成固定定位后的 top 的值
            var sliderTop = sliderbar.offsetTop - bannerTop;
            console.log(sliderTop);
            console.log(bannerTop);

            // 页面滚动事件  scroll
            document.addEventListener('scroll',function(){ 
                // 滚动到 banner部分
                if(window.pageYOffset >= bannerTop) {
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderTop + 'px';
                } else {
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '300px';
                }
                // 滚动到 主体部分
                if(window.pageYOffset >= mainTop) {
                    goBack.style.display = 'block';
                } else {
                    goBack.style.display = 'none';
                }
            })
        })
    </script>

client系列

元素可视区client系列

client和offset系列差不多功能，都是动态获得该元素的大小等信息

client系列属性	作用
element.clientWidth	返回自身包括padding,内容区宽度，返回数值也是不带单位的。注意：不包含边框
element.clientHeight	返回自身包括padding,内容区高度，返回数值不带单位。注意：不包含边框
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小

offset与client的区别

offset	client
offsetWidth 包含padding+border+width	clientwidth 包含padding+width 不包含 border
offsetheight 包含padding+border+height	clientheight 包含padding+height 不包含 border