web api – 一个非常有趣且很少被充分探索的领域。然而，有大量独特且非常有用的 api 可以帮助您为您的项目创建工具。
例如，跟踪尺寸变化是创建动态、响应式体验的关键。这就是 resize observer api 发挥作用的地方。
在本文中，我们将构建一个测量工具，实时显示可调整大小的框的宽度和高度。这个项目以实用和交互的方式展示了 resize observer api 和 browser api 的强大功能。
什么是调整大小观察者 api？
resize observer api 是一项浏览器功能，可让您检测元素大小的更改。调整观察者大小适用于单个元素。它开箱即用，可以成为您构建响应式设计和动态 ui 的工具集的重要补充。
这就是它的伟大之处：
- 它轻巧且易于使用
- 您可以跟踪特定元素的大小变化，而不仅仅是整个视口
- 它非常适合构建响应式组件或可调整大小的小部件
我们正在建设什么
我们将创建一个可调整大小的框，其内部显示尺寸。当用户调整框的大小时，显示的尺寸将实时更新。
第 1 步：设置项目
首先，让我们设置项目的基本结构：
第 2 步：标记
这是我们应用程序的简单布局。可调整大小的框包含一个文本范围来显示其尺寸：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>measuring tool with resize observer api</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div id="resizablebox" class="resizable"> <span id="dimensions">width: 0px, height: 0px</span> </div> </div> <script src="script.js"></script> </body> </html>
第 3 步：设计应用程序样式
我们将添加一些样式，使可调整大小的框更具视觉吸引力：
body { font-family: arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; } .container { position: relative; width: 80%; height: 80%; } .resizable { position: absolute; width: 300px; height: 200px; border: 2px dashed #007bff; background: rgba(0, 123, 255, 0.1); display: flex; justify-content: center; align-items: center; resize: both; overflow: auto; } .resizable span { background: white; padding: 5px; border-radius: 4px; font-size: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
第 4 步：添加实时调整大小跟踪
现在让我们使用 resize observer api 将项目变为现实：
const resizableBox = document.getElementById('resizableBox'); const dimensions = document.getElementById('dimensions'); const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0]; dimensions.textContent = `Width: ${Math.round(width)}px, Height: ${Math.round(height)}px`; } }); resizeObserver.observe(resizableBox);
第 5 步：测试工具
- 在浏览器中打开index.html 文件。
- 拖动框的角来调整其大小。
- 观看尺寸立即更新！
它是如何运作的
- resize observer api 被初始化以监视 resizingbox 元素的大小变化。每当观察到的元素的大小发生变化时，它就会触发回调。
- resize observer entry 通过 borderboxsize 属性提供更新的尺寸。
- 通过修改可调整大小的框中的 元素的文本内容来动态提取和显示更新的宽度和高度值。
结论
在本教程中，我们使用 resize observer api 构建了一个有趣且交互式的测量工具。该项目演示了浏览器 api 如何简化复杂的任务。
如果您尝试此操作或进一步扩展它，请随时在评论中分享您的创作！
另外，请查看 ckeditor 博客，了解有关富文本编辑器的文章，并立即注册免费试用，开始您的 ckeditor 5 之旅！
