如何使用 JavaScript 计算窗口的宽度和高度？

在本文中，我们将知道使用 Javascript 计算窗口的宽度和高度。给定一个在 Window 上运行的 HTML 文档，我们需要找到窗口的高度和宽度。 Window innerWidth 属性用于返回窗口内容区域的宽度。 Window innerHeight 属性用于返回窗口内容区域的高度。这两个属性都是只读属性。

句法：

window.innerWidth
window.innerHeight

返回值：它返回代表窗口内容区域的宽度和内部高度（以像素为单位）的数字。

示例 1：本示例使用window.innerHeight和window.innerWidth属性来获取窗口的高度和宽度。 innerHeight 属性用于返回窗口的高度， innerWidth 属性用于返回窗口的宽度。

HTML

 

    Calculate Width and Height of the Window

 

    
            GeeksforGeeks
        
    
 
    Click Here
    
    
 
     
    
    
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML = "Click on the button to get the"
    + " width and height of the Window";
 
    function GFG_Fun() {
        var width = window.innerWidth;
        var Height = window.innerHeight;
        el_down.innerHTML = "Width: " + width + " pixels"
        + ", " + "Height: " + Height + " pixels";
    }
    

 

输出：

window.inner 属性

示例 2：本示例使用document.documentElement.clientHeight和document.documentElement.clientWidth方法分别获取窗口的高度和宽度。

HTML

 

    Calculate Width and Height of the Window

 

    
            GeeksforGeeks
        
    
 
    Click Here
    
    
 
    
    
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML = "Click on the button to get the"
    + " width and height of the window";
 
    function GFG_Fun() {
        el_down.innerHTML = "Width:"
        + document.documentElement.clientWidth
        + " pixels"
        + ", "
        + "Height:"
        + document.documentElement.clientHeight
        + " pixels";
    }
    

 

输出：

documentElement.client 方法