README

最新推荐文章于 2024-02-27 22:21:20 发布

唐艾佳

最新推荐文章于 2024-02-27 22:21:20 发布

阅读量128

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_66236679/article/details/126110383

版权

小练习

实时获取浏览器可视区域宽高

实时获取宽高

根据宽度变化调整盒子颜色

html-1
window.onload = function () {
        let div = document.querySelector("div");
        window.addEventListener("resize", function () {
          let w, h;
          w =
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
          h =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight;
          // 变化后需要做的事
          if (w < 700) {
            div.className = "active";
          } else {
            div.className = "";
          }
        });
      };