如何查看当前窗口的宽高

本文转载自查看原文 2020-02-09 17:20 799 JS类

一、用Jquery查看窗口可视区域宽度、高度的代码：

　　1、alert($(window).width());alert($(window).height());//浏览器当前窗口可视区域宽度、高度。

　　2、或alert($(window).innerWidth());alert($(window).innerHeight());//浏览器当前窗口可视区域宽度、高度。

　　3、或者

1 var wh = function(){
2         var w = document.body.clientWidth;
3         alert("宽："+w)
4     }
5         wh();

　　//浏览器当前窗口可视区域宽度、高度。

　　4、或者

1  alert($(window).innerHeight());
2     var wh = function(){
3         var w = document.documentElement.clientWidth;
4         alert("宽："+w)
5     }
6         wh();

　　//浏览器当前窗口可视区域宽度、高度。

5、alert($(document).width());alert($(document).height());//浏览器当前窗口文档对象宽度、高度

6、alert($(document.body).width());alert($(document.body).height());//浏览器当前窗口文档body的宽度、高度

7、alert($(document.body).outerWidth(true));alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的宽度、总高度包括border padding margin

二、实例：利用变量来改变div的宽高

 1 <body>
 2     <div id="wrap"></div>
 3     <script>
 4         $(function(){
 5             var w = $(window).width();
 6             $(document).mousemove(function(){
 7                 $('#wrap').css("width","w+px").css('height','500px').css('background',"red")
 8             })
 9         })
10     </script>
11 </body>

　　实例：用js来获取浏览器视口的宽高

function getViewSize() {
    return {
        "w": window['innerWidth'] || document.documentElement.clientWidth,
        "h": window['innerHeight'] || document.documentElement.clientHeight
    }
}
 
function getFullSize() {
    var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) +
 
    Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
    var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) +
 
    Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    w = Math.max(document.documentElement.scrollWidth, w);
    h = Math.max(document.documentElement.scrollHeight, h);
    return {
        "w": w,
        "h": h
    };
}
 
function setContainerSize() {
    size = getViewSize();
    console.log(size);
    document.getElementById("div").style.width = size["w"] - 100 + "px";
    document.getElementById("div").style.height = size["h"] - 100 + "px";
}
 
setContainerSize();
window.onresize = setContainerSize;

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 微信小程序获取当前窗口的宽高 JS关闭当前窗口 wpf 如何让当前窗口隐藏 vue 关闭当前窗口判断当前窗口是否活动窗口 JavaScript当前窗口打开链接强制关闭当前窗口的js方法 screen案例--保存当前窗口输出 iframe实现关闭当前窗口效果 dll中获取当前窗口的句柄