初识JS_WebAPI基础Day5入门到放弃——笔记整理+1面试常问+2课后作业...

最新推荐文章于 2022-05-04 23:46:23 发布

UndeFIned丶

最新推荐文章于 2022-05-04 23:46:23 发布

阅读量369

点赞数 1

分类专栏： JavaScript学习文章标签： js

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/106199317

版权

JavaScript学习专栏收录该内容

36 篇文章 8 订阅

订阅专栏

文章目录
一.元素偏移量 offset 系列
1 . offset 概述
2. offset 与 style 区别
二. 元素可视区 client 系列
1 . client概述
三.元素滚动 scroll 系列
1 . scroll 概述
2. 页面被卷去的头部

一.元素偏移量 offset 系列

1. offset 概述

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

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

在这里插入图片描述

2. offset 与 style 区别

offset

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

想要获取元素大小位置，用offset更合适

style

style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值

想要给元素更改值，则需要用style改变

二. 元素可视区 client 系列

1. client概述

client 翻译过来就是客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client
系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

在这里插入图片描述

三.元素滚动 scroll 系列

1. scroll 概述

scroll 翻译过来就是滚动的，使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

在这里插入图片描述

2. 页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

四.三大系列总结

在这里插入图片描述
主要用法：

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

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

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

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

面试常问：

mouseenter 和mouseover的区别：

当鼠标移动到元素上时就会触发mouseenter 事件
类似 mouseover，它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

作业部分：
在这里插入图片描述

    <script>
        // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>

2.盒子移动效果
在这里插入图片描述

<body>
    <div>一号</div>
    <span>二号</span>
    <script>
        // 简单动画函数封装obj目标对象 target 目标位置
        function animate(obj, target) {
            var timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 调用函数
        animate(div, 300);
        animate(span, 200);
    </script>
</body>

分享Day6原生轮播图案例

UndeFIned丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
初识JS_WebAPI基础Day5入门到放弃——笔记整理+1面试常问+2课后作业...

文章目录一.元素偏移量 offset 系列1 . offset 概述2. offset 与 style 区别二. 元素可视区 client 系列1 . client概述三.元素滚动 scroll 系列1 . scroll 概述2. 页面被卷去的头部一.元素偏移量 offset 系列1. offset 概述offset 翻译过来就是偏移量，使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）
复制链接

扫一扫

专栏目录