Home >Web Front-end >JS Tutorial >Detailed explanation of innerWidth and innerHeight properties in JavaScript

Detailed explanation of innerWidth and innerHeight properties in JavaScript

藏色散人Original: 2019-03-27 14:41:134158browse

The innerWidth property in JavaScript returns the width, and the innerHeight property returns the height of the window content area.

Syntax:

window.innerWidth
window.innerHeight

Parameters: It does not require any parameters.

Return value: Returns a number indicating the width and height of the window content area.

Note: For IE 8 ie (Internet Edg 8) or earlier, use clientWidth and clientHeight to get the width and height of the window.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浏览器内部的宽度和高度</title>
    <style>
        body{
            text-align:center;
        }
        .gfg {
            font-size:40px;
            font-weight:bold;
            color:green;
        }
    </style>
</head>
<body>
<div class = "gfg">PHP中文网</div>
<h2>浏览器窗口</h2>
<p id="demo"></p>
<script>
    var Width, Height, result;

    // 浏览器窗口的高度和宽度
    Width = window.innerWidth || document.documentElement.clientWidth
        || document.body.clientWidth;

    Height = window.innerHeight || document.documentElement.clientHeight
        || document.body.clientHeight;
    // 显示宽度和高度。
    result = document.getElementById("demo");
    result.innerHTML = "浏览器内部宽度: " + Width +
        "<br>浏览器内部高度: " + Height;

</script>
</body>
</html>

Output:

Detailed explanation of innerWidth and innerHeight properties in JavaScript

##Related recommendations: "

javascript tutorial"

This article is an introduction to the Window innerWidth and innerHeight properties in JavaScript. I hope it will be helpful to friends in need!

The above is the detailed content of Detailed explanation of innerWidth and innerHeight properties in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Code example of additional parameters passed in iView component eventNext article：Code example of additional parameters passed in iView component event

See more

Detailed explanation of innerWidth and innerHeight properties in JavaScript

Related articles