JavaScript中innerWidth和innerHeight屬性詳解-js教程-PHP中文網

首頁

web前端

js教程

JavaScript中innerWidth和innerHeight屬性詳解

藏色散人

Mar 27, 2019 pm 02:41 PM

javascript

JavaScript中的innerWidth屬性傳回寬度，innerHeight屬性傳回視窗內容區域的高度。

語法：

window.innerWidth
window.innerHeight

參數：它不需要任何參數。

傳回值：傳回一個數字，表示視窗內容區域的寬度和高度。

注意：對於IE 8 ie（Internet Edg 8）或更早版本，請使用clientWidth和clientHeight取得視窗的寬度和高度。

範例：

<!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 id="浏览器窗口">浏览器窗口</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>

輸出：

JavaScript中innerWidth和innerHeight屬性詳解

#相關推薦：《javascript教學》

這篇文章就是關於JavaScript中Window innerWidth和innerHeight屬性的相關介紹，希望對需要的朋友有幫助！

以上是JavaScript中innerWidth和innerHeight屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。