如何查看當前窗口的寬高

本文轉載自查看原文 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中獲取當前窗口的句柄