web api - 一个非常有趣且很少被充分探索的领域。然而，有大量独特且非常有用的 api 可以帮助您为您的项目创建工具。
例如，跟踪尺寸变化是创建动态、响应式体验的关键。这就是 resize observer api 发挥作用的地方。
在本文中，我们将构建一个测量工具，实时显示可调整大小的框的宽度和高度。这个项目以实用和交互的方式展示了 resize observer api 和 browser api 的强大功能。
什么是调整大小观察者 api？
resize observer api 是一项浏览器功能，可让您检测元素大小的更改。调整观察者大小适用于单个元素。它开箱即用，可以成为您构建响应式设计和动态 ui 的工具集的重要补充。
这就是它的伟大之处：
- 它轻巧且易于使用
- 您可以跟踪特定元素的大小变化，而不仅仅是整个视口
- 它非常适合构建响应式组件或可调整大小的小部件
我们正在建设什么
我们将创建一个可调整大小的框，其内部显示尺寸。当用户调整框的大小时，显示的尺寸将实时更新。
第 1 步：设置项目
首先，让我们设置项目的基本结构：
resize-tool/ ├── index.html ├── styles.css ├── script.js
第 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 属性提供更新的尺寸。
- 通过修改可调整大小的框中的 <span> 元素的文本内容来动态提取和显示更新的宽度和高度值。
结论
在本教程中，我们使用 resize observer api 构建了一个有趣且交互式的测量工具。该项目演示了浏览器 api 如何简化复杂的任务。
如果您尝试此操作或进一步扩展它，请随时在评论中分享您的创作！
另外，请查看 ckeditor 博客，了解有关富文本编辑器的文章，并立即注册免费试用，开始您的 ckeditor 5 之旅！
