js即時取得瀏覽器視窗大小,我們可以使用addEventListener()方法來實作。此addEventListener()方法可以註冊事件處理程序以偵聽瀏覽器視窗resize事件,例如window.addEventListener('resize', ...)。
下面我們結合具體的程式碼實例,介紹給大家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函數。
取得目前正常瀏覽器視窗大小,如下所示:
#當我們將其瀏覽器視窗縮小,取得大小如下所示:
縮小視窗後,無需刷新,取得的大小也會即時顯示。
附註:EventTarget.addEventListener() 方法將指定的監聽器註冊到EventTarget 上,當該物件觸發指定的事件時,指定的回呼函數就會被執行。事件目標可以是一個文件上的元素 Element,Document和Window或任何其他支援事件的物件 (例如 XMLHttpRequest)。
這篇文章就是關於js即時取得瀏覽器視窗大小的具體方法介紹,簡單易懂,希望對需要的朋友有所幫助!
以上是js如何即時取得瀏覽器視窗大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!