在jQuery 中確定背景圖像尺寸
使用jQuery 檢索div 背景圖像的尺寸(寬度和高度)的任務看起來像是簡單,但它帶來了一些挑戰。
最初,嘗試利用jQuery('#myDiv').css('background-image').height() 可能會導致錯誤訊息,表明它不是函數。為了克服這個問題,我們探索了替代方法。
一種解決方案包括從背景圖像樣式中提取圖像 URL 並創建一個 Image 物件來載入圖像。當圖像加載成功後,我們可以訪問其寬度和高度屬性以獲得所需的尺寸。但是,此方法需要 DOM 操作,並且可能對影像檔案名稱中的某些字元敏感。
為了解決這些問題,我們提出了一個改進的解決方案,將程式碼封裝在名為 getBackgroundImageSize 的函數中。此函數利用 jQuery 的延遲物件來處理非同步影像載入並提供錯誤處理。另外,它採用了更健壯的正規表示式來匹配各種URL格式,保證了對不同瀏覽器和jQuery版本的兼容性。
getBackgroundImageSize的用法很簡單。只需提供 jQuery 元素作為參數,它就會傳回一個承諾。如果圖像載入成功,promise 將解析為包含背景圖像的寬度和高度的物件。否則,promise 將被拒絕。
這個更新的解決方案提供了一種更全面、更可靠的方法來使用 jQuery 確定 div 背景圖像的尺寸。
以上是如何使用 jQuery 可靠地取得背景影像的尺寸?的詳細內容。更多資訊請關注PHP中文網其他相關文章!