使用 Resize Observer API 建立測量工具

Web API - 一個非常有趣且很少被充分探索的領域。然而，有大量獨特且非常有用的 API 可以幫助您為您的專案建立工具。

例如，追蹤尺寸變化是創建動態、響應式體驗的關鍵。這就是 Resize Observer API 發揮作用的地方。

在本文中，我們將建立一個測量工具，即時顯示可調整大小的框的寬度和高度。這個專案以實用和互動的方式展示了 Resize Observer API 和 Browser API 的強大功能。

什麼是調整大小觀察者 API？

Resize Observer API 是一項瀏覽器功能，可讓您偵測元素大小的變更。調整觀察者大小適用於單一元素。它開箱即用，可以成為您建立響應式設計和動態 UI 的工具集的重要補充。

這就是它的偉大之處：

• 它輕巧且易於使用
• 您可以追蹤特定元素的大小變化，而不僅僅是整個視口
• 它非常適合建立響應式組件或可調整大小的小部件

我們正在建造什麼

我們將建立一個可調整大小的框，其內部顯示尺寸。當使用者調整框的大小時，顯示的尺寸將會即時更新。

第 1 步：設定項目

首先，讓我們設定專案的基本結構：

第 2 步：標記

這是我們應用程式的簡單佈局。可調整大小的方塊包含一個文字範圍來顯示其尺寸：

第 4 步：新增即時調整大小追蹤

現在讓我們使用 Resize Observer API 將項目變成現實：

第 5 步：測試工具

1. 在瀏覽器中開啟index.html檔案。
2. 拖曳框的角落來調整其大小。
3. 觀看尺寸立即更新！

它是如何運作的

1. Resize Observer API 被初始化以監視 resizingBox 元素的大小變化。每當觀察到的元素的大小發生變化時，它就會觸發回調。
2. Resize Observer Entry 透過 borderBoxSize 屬性提供更新的尺寸。
3. 透過修改的文字內容來動態提取並顯示更新的寬度和高度值。可調整大小的框內的元素。

結論

在本教學中，我們使用 Resize Observer API 建立了一個有趣且互動的測量工具。此專案示範了瀏覽器 API 如何簡化複雜的任務。
如果您嘗試此操作或進一步擴展它，請隨時在評論中分享您的創作！
另外，請查看 CKEditor 博客，了解有關富文本編輯器的文章，並立即註冊免費試用，開始您的 CKEditor 5 之旅！

以上是使用 Resize Observer API 建立測量工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！