PC端网页特效—元素偏移量 offset 系列（获取鼠标在盒子内部的坐标）、元素可视区 client 系列、元素滚动 scroll 系列（页面被卷去的头部、仿淘宝固定右侧侧边栏）

最新推荐文章于 2024-04-04 10:31:07 发布

Just-Lsy

最新推荐文章于 2024-04-04 10:31:07 发布

阅读量287

点赞数

分类专栏：笔记文章标签： html5 前端 html javascript css

本文链接：https://blog.csdn.net/m0_59030524/article/details/123319138

版权

Tip：在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。

目标：

能够说出常见offset系列属性的作用
能够说出常见client系列属性的作用
能够说出常见scroll系列属性的作用
能够封装简单动画函数
能够写出网页轮播图案例

1. 元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

offset 系列常用属性：

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

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

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
        }

        .son {
            width: 120px;
            height: 120px;
            background-color: rosybrown;
            margin-left: 45px;
        }

        .w {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 可以得到元素的偏移量 位置 返回不带单位的数值
        console.log(father.offsetTop);  //150
        console.log(father.offsetLeft);  //150
        // 它以带有定位的父元素为准，如果没有父元素或者没有定位，则以body为准
        console.log(son.offsetLeft);  //父亲定位之前是195，定位之后是45

        // 2. 获得元素自身的大小（宽度高度），如果有padding或border就加上相应的值
        var w = document.querySelector('.w');
        console.log(w.offsetWidth);   //200
        console.log(w.offsetHeight);   //200 

        // 3. 返回带有定位的父元素，否则返回的是body
        console.log(son.offsetParent); //返回父亲
        console.log(son.parentNode); //返回父亲 一级的父亲 不管有没有定位
    </script>
</body>

1.2 offset 与 style 的区别

1.2.1 offset

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含 padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值

最低0.47元/天解锁文章

Just-Lsy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PC端网页特效—元素偏移量 offset 系列（获取鼠标在盒子内部的坐标）、元素可视区 client 系列、元素滚动 scroll 系列（页面被卷去的头部、仿淘宝固定右侧侧边栏）

Tip：在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。目标：能够说出常见offset系列属性的作用能够说出常见client系列属性的作用能够说出常见scroll系列属性的作用能够封装简单动画函数能够写出网页轮播图案例 1. 元素偏移量 offset 系列1.1 offset 概述offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置.
复制链接

扫一扫