js 中的窗口事件

最新推荐文章于 2024-08-20 17:13:48 发布

大闸蟹~

最新推荐文章于 2024-08-20 17:13:48 发布

阅读量478

点赞数

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

本文链接：https://blog.csdn.net/ychh1/article/details/125658987

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!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 style="height:2000px;">
    <div id="box">窗口事件</div>
    <div id="box2"></div>


    <script>
        var box = document.getElementById('box');
        var box2 = document.getElementById("box2");

        box2.setAttribute("style", "height:100px;width:100px;background-color:red;position: fixed;right: 10px;bottom: 10px;display: none;")

        console.log(box); 

        //window.onscroll  滚动条事件
        window.onscroll = function () {
            var mt = document.documentElement.scrollTop;
            console.log("滚动条滚动了", mt + "px");

            if (mt > 300) {
                box2.style.display = 'block'
            } else {
                box2.style.display = 'none'
            }


            // 获取当前浏器窗口的宽和高
            var aw = window.innerWidth;
            var ah = window.innerHeight;
            console.log("原窗口的宽:" + aw + "px" + "高:" + ah + "px");

            // window.onresize() 浏览器窗口繁盛改变的事件
            window.onresize = function () {
                aw = window.innerWidth;
                ah = window.innerHeight;

                console.log("窗口发生改变了！改变后的宽：" + aw + "px," + "高：" + ah + "px");
            }
        }
    </script>
</body>

</html>