Home > Web Front-end > JS Tutorial > body text

Detailed explanation of innerWidth and innerHeight properties in JavaScript

藏色散人
Release: 2019-03-27 14:51:12
Original
4139 people have browsed it

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
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template