suchen

Heim >Web-Frontend >js-Tutorial >Erstellen eines Messtools mit der Resize Observer API

Erstellen eines Messtools mit der Resize Observer API

Barbara Streisand
Barbara StreisandOriginal
2024-12-21 06:56:13827Durchsuche

Building a Measuring Tool with the Resize Observer API

Web-APIs – ein sehr interessantes und selten gut erforschtes Gebiet. Und doch gibt es eine große Anzahl einzigartiger und sehr nützlicher APIs, die Ihnen bei der Erstellung von Tools für Ihre Projekte helfen können.

Zum Beispiel ist die Verfolgung von Größenänderungen der Schlüssel zur Schaffung dynamischer, reaktionsfähiger Erlebnisse. Hier kommt die Resize Observer API ins Spiel.

In diesem Artikel erstellen wir ein Messwerkzeug, das die Breite und Höhe eines skalierbaren Felds in Echtzeit anzeigt. Dies ist ein Projekt, das die Leistungsfähigkeit der Resize Observer API und der Browser-APIs im Allgemeinen auf praktische und interaktive Weise demonstriert.

Was ist die Resize Observer-API?

Die Resize Observer API ist eine Browserfunktion, mit der Sie Änderungen an der Größe eines Elements erkennen können. Resize Observer funktioniert auf einzelnen Elementen. Es funktioniert sofort und kann eine großartige Ergänzung Ihres Toolsets zum Erstellen von responsivem Design und dynamischen Benutzeroberflächen sein.

Das macht es großartig:

  • Es ist leicht und einfach zu bedienen
  • Sie können Größenänderungen für bestimmte Elemente verfolgen, nicht nur für das gesamte Ansichtsfenster
  • Es eignet sich perfekt zum Erstellen reaktionsfähiger Komponenten oder skalierbarer Widgets

Was wir bauen

Wir erstellen ein Feld mit veränderbarer Größe, in dem die Abmessungen angezeigt werden. Wenn der Benutzer die Größe der Box ändert, werden die angezeigten Abmessungen in Echtzeit aktualisiert.

Schritt 1: Einrichten des Projekts

Lassen Sie uns zunächst die Grundstruktur für unser Projekt einrichten:

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

Schritt 2: Das Markup

Hier ist ein einfaches Layout für unsere App. Das in der Größe veränderbare Feld enthält einen Textbereich zur Anzeige seiner Abmessungen:

<!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);
}

Schritt 4: Hinzufügen einer Größenänderungsverfolgung in Echtzeit

Jetzt erwecken wir das Projekt mit der Resize Observer API zum Leben:

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

Schritt 5: Testen des Tools

  1. Öffnen Sie die Datei index.html in Ihrem Browser.
  2. Ziehen Sie an den Ecken des Felds, um die Größe zu ändern.
  3. Beobachten Sie, wie sich die Abmessungen sofort aktualisieren!

Wie es funktioniert

  1. Die Resize Observer API wird initialisiert, um Größenänderungen für das resizableBox-Element zu überwachen. Es löst einen Rückruf aus, wenn sich die Größe des beobachteten Elements ändert.
  2. Der Resize Observer-Eintrag stellt aktualisierte Abmessungen über die Eigenschaft borderBoxSize bereit.
  3. Die aktualisierten Breiten- und Höhenwerte werden extrahiert und dynamisch angezeigt, indem der Textinhalt des geändert wird. Element innerhalb der veränderbaren Box.

    Abschluss

    In diesem Tutorial haben wir ein unterhaltsames und interaktives Messwerkzeug mithilfe der Resize Observer API erstellt. Dieses Projekt zeigt, wie Browser-APIs komplexe Aufgaben vereinfachen können.
    Wenn Sie dies ausprobieren oder weiter ausbauen, teilen Sie Ihre Kreationen gerne in den Kommentaren!
    Schauen Sie sich auch den CKEditor-Blog für Artikel rund um Rich-Text-Editoren an und beginnen Sie Ihre Reise mit CKEditor 5, indem Sie sich noch heute für eine kostenlose Testversion anmelden!

    Das obige ist der detaillierte Inhalt vonErstellen eines Messtools mit der Resize Observer API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html if for try using Property number this display viewport
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie funktioniert Currying mit mehreren Pfeilfunktionen in JavaScript?Nächster Artikel：Wie funktioniert Currying mit mehreren Pfeilfunktionen in JavaScript?

In Verbindung stehende Artikel

Mehr sehen