改变浏览器大小自动获取宽高

最新推荐文章于 2023-08-10 15:25:53 发布

原创最新推荐文章于 2023-08-10 15:25:53 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#改变浏览器 #获取宽高 #改变浏览器大小自动获取浏览器的宽高

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用JavaScript获取浏览器窗口的宽度和高度，并将这些尺寸应用到网页元素上，适用于Firefox和IE浏览器。

<div id="content" style="color: red;"></div>
<script type="text/javascript">
    <!--
      var winWidth = 0;
      var winHeight = 0;
      // 函数：获取尺寸
      function findDimensions()
      {
        // 获取窗口宽度
        if (window.innerWidth)
          winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
          winWidth = document.body.clientWidth;
        // 获取窗口高度
        if (window.innerHeight)
          winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
          winHeight = document.body.clientHeight;
        // 通过深入 Document 内部对 body 进行检测，获取窗口大小
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
        {
          winHeight = document.documentElement.clientHeight;
          winWidth = document.documentElement.clientWidth;
        }
        // 结果设置到Div上
        $("#content").width(winWidth); 
        $("#content").height(winHeight);
        }
        findDimensions();
        // 调用函数，获取数值
        window.onresize=findDimensions;
        //-->
</script>

支持火狐和IE