Web前端 BOM

最新推荐文章于 2024-09-30 13:14:49 发布

郭志林

最新推荐文章于 2024-09-30 13:14:49 发布

阅读量220

点赞数

分类专栏： Web 文章标签： js javascript css vue jquery

本文链接：https://blog.csdn.net/qq_44702163/article/details/109954482

版权

本文详细探讨了Web前端中的浏览器对象模型(BOM)重点，聚焦于window对象及其在页面交互中的核心作用。特别讨论了如何利用window对象处理窗口大小改变的事件，为用户提供更佳的响应式体验。

摘要由CSDN通过智能技术生成

##window对象，调整窗口大小事件
在这里插入图片描述

在这里插入代码片
``<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        window.addEventListener('load', function () {
            var div = document.querySelector('.box');
            window.addEventListener('resize', function () {
                console.log(window.innerWidth);
                console.log("变化了");