首页 >web前端 >js教程 >使用 Resize Observer API 构建测量工具

使用 Resize Observer API 构建测量工具

Barbara Streisand原创: 2024-12-21 06:56:13827浏览

Building a Measuring Tool with the Resize Observer API

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>



<h2>
  
  
  Step 3: Styling the App
</h2>

<p>We’ll add some styles to make the resizable box more visually appealing:<br>
</p>

<pre class="brush:php;toolbar:false">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 将项目变为现实：

resize-tool/
├── index.html
├── styles.css
├── script.js

第 5 步：测试工具

在浏览器中打开index.html文件。
拖动框的角来调整其大小。
观看尺寸立即更新！

它是如何运作的

Resize Observer API 被初始化以监视 resizingBox 元素的大小变化。每当观察到的元素的大小发生变化时，它就会触发回调。
Resize Observer Entry 通过 borderBoxSize 属性提供更新的尺寸。
通过修改的文本内容来动态提取并显示更新的宽度和高度值。可调整大小的框内的元素。

结论

在本教程中，我们使用 Resize Observer API 构建了一个有趣且交互式的测量工具。该项目演示了浏览器 API 如何简化复杂的任务。
如果您尝试此操作或进一步扩展它，请随时在评论中分享您的创作！
另外，请查看 CKEditor 博客，了解有关富文本编辑器的文章，并立即注册免费试用，开始您的 CKEditor 5 之旅！

以上是使用 Resize Observer API 构建测量工具的详细内容。更多信息请关注PHP中文网其他相关文章！

html if for try using Property number this display viewport

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How Does Currying Work with Multiple Arrow Functions in JavaScript?下一篇：Big O Notations

查看更多