用jQuery輕鬆取得螢幕高度的方法

使用jQuery輕鬆取得螢幕高度的方法

在網頁開發過程中，有時候我們需要取得目前瀏覽器視窗的高度，以便做出對應的佈局調整或執行特定的操作。而使用jQuery可以很輕鬆地實現獲取螢幕高度的功能。下面將介紹具體的程式碼範例。

首先，在HTML檔案中引入jQuery函式庫。可以透過CDN連結引入，也可以下載本地jQuery檔案引入到專案中。以下是透過CDN連結引入jQuery的範例：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

接著，在JavaScript程式碼中編寫獲取螢幕高度的函數。具體程式碼如下：

$(document).ready(function() {
    // 获取屏幕高度
    var screenHeight = $(window).height();
    
    // 输出屏幕高度
    console.log("屏幕高度：" + screenHeight);
});

在上述程式碼中，我們首先透過$(window).height()方法取得了目前瀏覽器視窗的高度，並將其賦值為變數screenHeight。然後透過console.log()方法輸出了螢幕的高度。

如果想要在頁面載入完成後立即取得並展示螢幕高度，可以將上述程式碼放在$(document).ready()函數中。這樣就可以確保DOM載入完成後再執行取得螢幕高度的操作。

當瀏覽器視窗的大小改變時，也可以透過監聽resize事件來即時取得最新的螢幕高度：

$(window).resize(function() {
    var screenHeight = $(window).height();
    console.log("窗口高度已更新为：" + screenHeight);
});

透過上述程式碼範例，我們可以輕鬆地使用jQuery獲取螢幕高度，並在需要的時候即時更新。這種方法簡單易用，適用於各種網頁開發場景。

以上是用jQuery輕鬆取得螢幕高度的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！