首頁 > web前端 > js教程 > 主體

JavaScript中innerWidth和innerHeight屬性詳解

藏色散人
發布: 2019-03-27 14:51:12
原創
4139 人瀏覽過

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>浏览器窗口</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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板