DOM操作视窗窗口监听事件

最新推荐文章于 2023-09-15 16:41:08 发布

大聪明码农徐

最新推荐文章于 2023-09-15 16:41:08 发布

阅读量743

点赞数 2

分类专栏： JavaScript基础文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_45799465/article/details/122775380

版权

JavaScript基础专栏收录该内容

34 篇文章 17 订阅

订阅专栏

BOM操作视窗窗口宽度高度

情况1：包括滚动条宽度

window.innerWidth

window.innerHeight

    <style>
        body{
            height: 5000px;
        }
    </style>
<body>
    <script>
        // 情况1：包括滚动条宽度
         var width = window.innerWidth
         console.log(width);
    </script>
</body>

运行结果：

情况2 ：不包括滚动条宽度

有文档类型声明

document.documentElement.clientWidth

document.documentElement.clientHeight

没有文档类型声明

document.body.clientWidth

document.body.clientHeight

（一般用VS编辑器感叹号生成的页面结构都有文档声明（<!DOCTYPE html>））

宽高同理，这里只用宽做演示。

应用

当视窗窗口宽度高度改变时触发对应的函数程序

window.addEventListener( 'scroll' , function(){} ) 页面滚动监听事件

window.addEventListener( 'resize' , function(){} ) 浏览器视窗窗口大小监听事件

    <style>
        body{
            height: 5000px;
        }
        div{
            width: 100%;
            height: 100px;
            background: purple;
            margin: 50px auto;
            color: white;
            text-align: center;
            font-size: 50px;
            line-height: 100px;
            transition: all 1s;
        }
    </style>

<body>
    <div>我是一个紫色的div盒子</div>
    <script>
        // 获取标签对象
        var oDiv = document.querySelector('div');
        // 浏览器视窗窗口大小监听事件
        window.addEventListener('resize',function(){
            var width = document.documentElement.scrollWidth;
            // 条件判断是否大于1200px
            if(width >1200){
                // 更改宽度
                oDiv.style.width = '100%';
                // 更改背景颜色
                oDiv.style.background = 'purple';
                // 写入字符串
                oDiv.innerHTML = '我是一个紫色的div盒子'
            }else if(width <=1200&& width >960){
                oDiv.style.width = '900px';
                oDiv.style.background = 'pink';
                oDiv.innerHTML = '我是一个粉色的div盒子'
            }else if(width <=960&& width >768){
                oDiv.style.width = '600px';
                oDiv.style.background = 'red';
                oDiv.innerHTML = '我是一个红色的div盒子'
            }else if(width <=768){
                oDiv.style.width = '400px';
                oDiv.style.background = 'green';
                oDiv.innerHTML = '我是绿盒子'
            }
            
        })
    </script>
</body>

运行结果：

页面上卷的高度

有文档类型声明

document.documentElement.scrollTop

document.documentElement.scrollLeft

没有文档类型声明

document.body.scrollTop

document.body.scrollLeft

应用

window.addEventListener( 'scroll' , function(){} ) 页面滚动监听事件

window.addEventListener( 'resize' , function(){} ) 浏览器视窗窗口大小监听事件

<style>
    body{
        height: 5000px;
    }
    div{
        width: 100%;
        height: 150px;
        background-color: purple;
        color: white;
        font-size: 40px;
        line-height: 150px;
        text-align: center;
        position: fixed;
        display: none;
    }
</style>

<body>
    <div>这是一个上卷的div</div>
    <script>
        var oDiv = document.querySelector('div');
        window.addEventListener('scroll',function(){
            if(document.documentElement.scrollTop >3000){
                oDiv.style.display = 'block';
            }
        })
    </script>
</body>

运行结果：

大聪明码农徐

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM操作视窗窗口监听事件

BOM操作视窗窗口宽度高度情况1：包括滚动条宽度window.innerWidthwindow.innerHeight <style> body{ height: 5000px; } </style><body> <script> // 情况1：包括滚动条宽度 var width = window.innerWidth
复制链接

扫一扫