Web APIs 实用案例

WangZhang_521

已于 2022-03-17 15:38:58 修改

阅读量333

点赞数

分类专栏： Web API 文章标签：前端 javascript html

于 2022-03-17 15:38:54 首次发布

本文链接：https://blog.csdn.net/WangZhang_521/article/details/123551739

版权

01-页面滚动事件

<!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>
        body {
    
            height: 3000px;
        }
        
        div {
    
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div>我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字</div>
    <script>
        //监听整个页面滚动
        // window.addEventListener('scroll', function() {
    
        //     // alert(1)
        // })

        //监听div盒子的滚动
        //获取div元素
        let div = document.querySelector('div');
        div.addEventListener('scroll', function() {
    
            alert(1)
        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

02-页面加载事件

<!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>
</head>

<body>
    <!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>
            body {
    
                height: 3000px;
            }
            
            div {
    
                width: 200px;
                height: 200px;
                background-color: pink;
                overflow: auto;
            }
        </style>
        <script>
            // 1. 等页面加载完毕执行以下代码
            // window.addEventListener('load', function() {
    
            //     let div = document.querySelector('div');
            //     console.log(div);
            // })
            // 2. 等初始的HTML文档(DOM)被完全加载和解析完成之后，触发事件
            document.addEventListener('DOMContentLoaded', function() {
    
                let div = document.querySelector('div');
                console.log(div);
            })
        </script>
    </head>

    <body>
        <div>我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字我里面可以放很多的文字</div>

    </body>

    </html>
</body>

</html>

03-三大家族宽高对比

<!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>
        * {
    
            padding: 0;
            margin: 0;
        }
        
        div {
    
            width: 150px;
            height: 150px;
            background-color: pink;
            overflow: auto;
            padding: 10px;
            border: 10px solid red;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div>我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容我有很多很多内容</div>
    <script>
        // 1. scrollWidth 和 scrollHeight(了解)   实际内容的宽高,不包含滚动条,不含边框
        let div = document.querySelector('div');
        console.log(div.scrollHeight); // 416 不带单位 
        console.log(div.scrollWidth); // 150 不带单位
        console.log('---------------------------------------------------------------------------------------');
        // offset 盒子元素的大小=盒子本身的宽度和高度 + border + padding 
        console.log(div.offsetWidth);
        console.log(div.offsetHeight);
        console.log(div.offsetLeft);
        console.log(div.offsetTop);
        // client 当前可视区域 获取元素当前可见区域的宽高(不含边框，滚动条)
        console.log('---------------------------------------------------------------------------------------');

        console.log(div.clientHeight);
        console.log(div.clientWidth);
        console.log(div.clientLeft);
        console.log(div.clientTop); //边框的宽度 了解




        // // 2.被卷去的头部(包含上边框)和左侧(包含左边框)  scrollLeft 和 scrollTop
        // div.addEventListener('scroll', function() {
    
        //     console.log(this.scrollLeft);
        //     console.log(this.scrollTop);
        // })
    </script>
</body>

</html>

04-检测页面滚动的距离

<!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>
        body {
    
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // console.log(document.documentElement); // 返回html标签  document.documentElement=document.html,这种写法兼容，document.html不兼容
        // 先做页面滚动事件
        window.addEventListener('scroll', function() {
    
                // console.log(1);
                console

最低0.47元/天解锁文章

WangZhang_521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web APIs 实用案例

01-页面滚动事件<!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"> <t
复制链接

扫一扫