DOM-网页特效篇

心动の弟弟

已于 2022-03-26 16:46:13 修改

阅读量240

点赞数

分类专栏：四、Web-API 文章标签： javascript

于 2022-03-25 18:43:01 首次发布

本文链接：https://blog.csdn.net/weixin_49077562/article/details/123742850

版权

四、Web-API 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

滚动事件和加载事件

滚动事件

在这里插入图片描述


**加载事件**

在这里插入图片描述

load事件：等加载完所有资源 ：dom元素 css 图片 音频等
DOMContentLoaded:等dom中的元素标签加载完成即可

在这里插入图片描述

元素大小和位置

**三大家族**

在这里插入图片描述

scroll

scroll家族

在这里插入图片描述

   div {
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: auto;
        }
        200-183=17px  这是滚动条的宽度  内容宽度变成了183

在这里插入图片描述

 let div = document.querySelector('div');
        // console.log(div.scrollWidth); // 返回div的内容宽度 并且不带单位 200
        // console.log(div.scrollHeight); // 返回div的内容高度 并且不带单位 588

        div.addEventListener('scroll', function () {
            console.log(this.scrollTop);  // 打印向上滚动的距离  不带单位
        });

获取html标签： document.documentelement

在这里插入图片描述

scrollTop  和   scrollLeft 可以直接赋值数字型  不能带单位

在这里插入图片描述

offset家族

在这里插入图片描述

offsetWidth 和 offsetHeight：盒子元素的大小=盒子本身的宽高+padding+border  获取的是元素的盒子信息
获取元素的位置：位置是相对于有定位的父级元素进行参考的  若没有定位 则往上找 若都没有定位 以浏览器左上角为准 
获取元素位置信息：   console.log(div.offsetTop);console.log(div.offsetLeft);
		-

在这里插入图片描述

client家族

client ：相对于当前浏览器的可视区域    不包含滚动条边框等等
可视区域：浏览器窗口缩放导致可视区域变化

在这里插入图片描述

窗口resize事件：浏览器窗口大小变化时发生的事件
在这里插入图片描述

在这里插入图片描述
client总结

clientTpo :就等于边框的高度  可视区域到边框的距离

在这里插入图片描述

三大家族总结

在这里插入图片描述

三大家族代码如下


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: auto;
            border: 10px salmon solid;
            padding: 10px;
            /* margin: 10px; */
            /* margin: 100px 200px; */
        }
    </style>
</head>

<body>
    <div>
        我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容我有很多的内容
    </div>

    <script>

        let div = document.querySelector('div');
        console.log('scroll家族');
        console.log('div内容的宽高：scrollWidth-scrollHeight');
        console.log('scrollWidth:' + div.scrollWidth); // 返回div的内容宽度 【不包括padding 边框 】并且不带单位 200
        console.log('scrollHeight:' + div.scrollHeight); // 返回div的内容高度  【不包括padding 边框 】 并且不带单位 588
        console.log('----------------------------------------------------------');

        console.log('div盒子本身的宽高：offsetWidth-offsetHeight');
        console.log('盒子本身的宽div.offsetWidth:' + div.offsetWidth);//【包括padding 边框 但是不包括margin 】 240
        console.log('盒子本身的高div.offsetHeight:' + div.offsetHeight);//【包括padding 边框 但是不包括margin 】 240
        console.log(div.offsetTop);//
        console.log(div.offsetLeft);//

        console.log('----------------------------------------------------------');
        console.log('client家族');
        console.log('clientHeight:' + div.clientHeight);//
        console.log('clientWidth:' + div.clientWidth);//
        console.log('clientLeft:' + div.clientLeft);//
        console.log('clientTop:' + div.clientTop);//

        // div.addEventListener('scroll', function () {
        //     console.log(this.scrollTop);
        // });
    </script>
</body>

</html>