js如何即時取得瀏覽器視窗大小-html知識-PHP中文網

首頁

每日程式設計

html知識

js如何即時取得瀏覽器視窗大小

藏色散人

Dec 19, 2018 pm 03:33 PM

js即時取得瀏覽器視窗大小，我們可以使用addEventListener()方法來實作。此addEventListener()方法可以註冊事件處理程序以偵聽瀏覽器視窗resize事件，例如window.addEventListener('resize', ...)。

js如何即時取得瀏覽器視窗大小

下面我們結合具體的程式碼實例，介紹給大家js即時取得瀏覽器視窗大小的方法。

程式碼範例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js实时获取浏览器窗口大小示例</title>
</head>
<body>
<div id="result"></div>
<script>
 // 定义事件侦听器函数
 function displayWindowSize(){
        // 获取窗口的宽度和高度，不包括滚动条
 var w = document.documentElement.clientWidth;
 var h = document.documentElement.clientHeight;

 // 在div元素中显示结果
 document.getElementById("result").innerHTML = "宽: " + w + ", " + "高: " + h;
 }

    // 将事件侦听器函数附加到窗口的resize事件
 window.addEventListener("resize", displayWindowSize);

 // 第一次调用该函数
 displayWindowSize();
</script>
</body>
</html>

登入後複製

在上述程式碼中，我們自訂了一個取得視窗寬高的displayWindowSize函數（透過clientWidth和clientHeight屬性），然後在addEventListener() 方法中，加入兩個參數，分別是“resize”，“displayWindowSize”。

第一個參數則是可以即時監聽視窗大小，當視窗每發生變化一次，就會呼叫第二參數即displayWindowSize函數。

取得目前正常瀏覽器視窗大小，如下所示：

js如何即時取得瀏覽器視窗大小

#當我們將其瀏覽器視窗縮小，取得大小如下所示：

js如何即時取得瀏覽器視窗大小

縮小視窗後，無需刷新，取得的大小也會即時顯示。

附註：EventTarget.addEventListener() 方法將指定的監聽器註冊到EventTarget 上，當該物件觸發指定的事件時，指定的回呼函數就會被執行。事件目標可以是一個文件上的元素 Element,Document和Window或任何其他支援事件的物件 (例如 XMLHttpRequest)。

這篇文章就是關於js即時取得瀏覽器視窗大小的具體方法介紹，簡單易懂，希望對需要的朋友有所幫助！

以上是js如何即時取得瀏覽器視窗大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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